Platzi
Platzi

LA EDUCACIÓN ES UN REGALO ¡ACCEDE AL PRECIO ESPECIAL!

Antes: $249
$149
Currency
Antes: $249
Ahorras: $100
COMIENZA AHORA
Termina en: 15D : 6H : 12M : 3S

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Curso de Tailwind CSS

Curso de Tailwind CSS

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Personalización y configuración

4/29
Recursos

Aportes 12

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Configuración

Ya que Tailwind es un framework para construir UI a la medida, por default, se tiene un archivo opcional llamado tailwind.config.js en la raíz de la carpeta, donde está el package.json.

Creando un archivo de configuración

Para generar un archivo de configuración para Tailwind, podemos usar el Tailwind CLI:

npx tailwind init

Nota. Podemos utilizar esta herramienta cuando instalamos la dependencia via npm.
Donde como resultado tendremos tailwind.config.js:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

Cabe mencionar que cada sección, del archivo de configuración, es opcional.

La sección Theme

Esta sección es donde definimos los aspectos relacionados con el diseño visual de nuestro sitio.

...
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    borderWidth: {
      default: '1px',
      '0': '0',
      '2': '2px',
      '4': '4px',
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      spacing: {
        '96': '24rem',
        '128': '32rem',
      }
    }
  }
...

La sección Variants

Esta sección nos permite controlar el comportamiento de las utilidades core, como responsive variants y pseudo-class variants.

...
  variants: {
    appearance: ['responsive'],
    // ...
    borderColor: ['responsive', 'hover', 'focus'],
    // ...
    outline: ['responsive', 'focus'],
    // ...
    zIndex: ['responsive'],
  },
...

La sección Plugins

Esta sección nos permite registrar plugins de terceros con el objetivo de extender utilidades, componentes, estilos, etc.

...
  plugins: [
    require('tailwindcss-transforms'),
    require('tailwindcss-transitions'),
    require('tailwindcss-border-gradients'),
  ],
...

para que no sufran con la configuración del archivo tailwind.config.js les recomiendo que en la terminal escriban este comando para que les genere un archivo totalmente completo

npx tailwindcss init tailwind.config.full.js --full

con ese comando se ahorran mucho con la configuración, espero les haya servido amigos/as

Estos son mis apuntes de esta clase:

<h1>2.1 Personalización y configuración</h1>

https://tailwindcss.com/docs/configuration/#app

tailwind.config.js
En este archivo podemos personalizar parámetros de estilos de nuestro proyecto como ser fontFamily, agregar más colores de los que tailwind trae por defecto.

En theme, podemos configurar por ejemplo el tipo de letra.
En extend podemos añadir cosas extras a tailwind, como colores.

En esta clase aprendí a personalizar y configurar ambiente de Tailwind CSS

Tube algunos problemas así que lo compartiré

  • Actualizar node y npm para no tener problemas de compilación

  • Al instalar postcss se debe colocar como “postcss-cli”

  • Un tutorial así bien cool que me encontré

Se pueden hacer dos cosas con el archivo de configuración de Tailwind, que son :
//Reemplazar la configuración por defecto
//Aumentar la funcionalidad agregando 'elementos ’ extras

Vaya si entendí bien esta clase, en el archivo tailwind.config.js podemos modificar agregar algunos valores que ya vienen por defecto como en cualquier otro framework. Es la primera vez que veo algo así es decir en materialize o Boostrap desconozco si tiene la misma opción 😮

f

Mmmm por lo que voy entendiendo, en el file de tailwind.config.js personalizamos el framework, interesante!

.

Config File tailwind.config.js: In documentation tailwind. Add Tailwind to your CSS.

https://tailwindcss.com/docs/installation you can search the work config in the documentation.

Is for change config for example in this case fontFamily and extend

In file tailwind.config.js

module.exports = {
  purge: [],
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
    }
  },
  variants: {},
  plugins: [],
}

En su configuración podemos:

  • Reemplazar valores por defecto
  • Extender su funcionalidad agregando valores