Personalización y configuración

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:

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.

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é

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

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 😮

Personalización y configuración

• Dentro del archivo tailwind.config.js puedes personalizar la configuración

  1. Theme

• Es donde define la paleta de colores, la escala de tipos, las fuentes, los
  puntos de interrupción, los valores del radio del borde y más de su proyecto.

  1.1 screens

  screens permite personalizar los breakpoints responsivos de tu proyecto

  module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }
      
      'md': '768px',
      // => @media (min-width: 768px) { ... }
      
      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }
      
      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }
      
      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
  

  1.2 Colors

  colors permite personalizar la paleta de colores global para su proyecto.

  module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },
  
      // ...
    }
  }
  

  1.3 Spacing

  spacing permite personalizar el espaciado global y la escala de tamaño para
  su proyecto

  module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
    }
  }
  

  keyword extend

  extend Se usa para agregar valores, sin eliminar los que vienen por default

  module.exports = {
  theme: {
    extend: {
      // agrega un nuevo breakpoint además de los brakepoints predeterminados 
      screens: {
        '3xl': '1600px',
      }
    }
  }
  

es muy buen dato, aunque si me seria un poco dificil adaptarme a ello.

El archivo de tailwind.config.js es donde personalizamos a nuestro antojo el framework 😮 que interesante

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