El archivo de configuración tailwind.config.js
Debido a que Tailwind es un framework para crear interfaces construidas a la mediada, ha sido diseñado desde sus cimientos con la idea en mente de ser personalizado.
Por default, Tailwind buscará una opción tailwind.config.js en el directorio raíz del proyecto en donde se pueden definir estas configuraciones.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
colors: {
blue: '#1fb6ff',
purple: '#7e5bef',
pink: '#ff49db',
orange: '#ff7849',
green: '#13ce66',
yellow: '#ffc82c',
'gray-dark': '#273444',
gray: '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem',
},
borderRadius: {
'4xl': '2rem',
},
},
},
}
Cada sección del archivo de configuración es opcional, de forma que solo se debe especificar aquello que deseamos cambiar.
Cualquier sección que no se incluya tomará los valores de la configuración por default de Tailwind.
Crear un archivo de configuración
Para generar tu archivo de configuración de Tailwind CSS utilizando npm, ejecutamos el siguiente comando.
npx tailwind init
Esto generará un archivo llamado tailwind.config.js con la configuración mínima en el directorio root de tu proyecto.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Utilizar un archivo de configuración personalizado
Para utilizar un archivo con un nombre distinto a tailwind.config.js pasa el nombre del archivo a utilizar en la línea de comandos.
npx tailwindcss init tailwindcss-config.js
Cuando utilices un archivo de configuración propio, especifica este en la línea de comandos al momento de compilar tu CSS con el CLI de Tailwind CSS.
npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css
Si estas utilizando Tailwind con el plugin de PostCSS, es necesario especificar la ruta al archivo de configuración en el archivo de configuración de PostCSS.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {
config: './tailwindcss-config.js',
},
},
}
También es posible especificar la ruta de la configuración dentro de la directiva @config .
@config "./tailwindcss-config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
Utilizar ESM o TypeScript
También es posible configurar Tailwind CSS en ESM o incluso en TypeScript.
Para generar a configuración basada en ESM.
npx tailwindcss init --esm
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Para generar la configuración basada en TypeScript.
npx tailwindcss init --ts
// tailwind.config.ts
import type { Config } from 'tailwindcss'
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
} satisfies Config
Generando un archivo de configuración PostCSS
Utiliza el argumento -p si deseas generar un archivo de configuración postcss.config.js en conjunto con un archivo tailwind.config.js
npx tailwindcss init -p
Esto generará un archivo postcss.config.js dentro de tu proyecto como el siguiente.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Generar el archivo de configuración completo
Se recomienda mantener el archivo de configuración con la mínima cantidad de opciones posibles, y solo modificar aquellas que se necesiten ajustar.
Si aún asi se necesita generar un archivo de configuración con todas las opciones disponibles, esto se puede hacer utilizando el argumento --full .
npx tailwindcss init --full
Opciones de configuración
Content (Contenido)
La sección content es donde se especifican las rutas a todos los archivos HTML, JS y cualquier otro que requiera utilizar las clases de Tailwind.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./pages/**/*.{html,js}', './components/**/*.{html,js}'],
// ...
}
Theme (Tema)
La sección theme es en donde se define la paleta de colores, fuentes, tamaño de los bordes, breakpoints y cualquier otro elemento relacionado al diseño visual de tu sitio.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
theme: {
colors: {
blue: '#1fb6ff',
purple: '#7e5bef',
pink: '#ff49db',
orange: '#ff7849',
green: '#13ce66',
yellow: '#ffc82c',
'gray-dark': '#273444',
gray: '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem',
},
borderRadius: {
'4xl': '2rem',
},
},
},
}
Plugins
La sección plugins permite registrar plugins con Tailwind que pueden ser utilizados para genera utilidades extra, componentes, estilos base, o variantes personalizadas.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('tailwindcss-children'),
],
}
Presets (Preconfiguración)
La sección presets permite especificar tu propia configuración base en lugar de utilizar la de Tailwind.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
presets: [require('@acmecorp/base-tailwind-config')],
// Project-specific customizations
theme: {
//...
},
}
Prefix (Prefijo)
La opción prefix permite añadir un prefijo personalizado a todas las clases que genera Tailwind. Esto puede ser muy util cuando se esta utilizando Tailwind sobre un proyecto con CSS existente que deseamos sobreescribir sin generar colapsos entre clases.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
prefix: 'tw-',
}
Ahora cada clase se generará con un prefijo.
.tw-text-left {
text-align: left;
}
.tw-text-center {
text-align: center;
}
.tw-text-right {
text-align: right;
}
Es importante entender que este prefijo es añadido a cada variante de modificador. Esto quiere decir que clases con modificadores responsivos or de estado como sm: o hover: mantendrán el modificador responsivo o de estar al inicio, con la opción de prefijo aparece después del punto y coma.
<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
<!-- -->
</div>
El modificador para valores negativos debe ser añadido antes del prefijo, de tal forma que -mt-8 se convertirá en -tw-mt-8 si has configurado tw- como el prefijo.
<div class="-tw-mt-8">
<!-- -->
</div>
Los prefijos solo se añaden a clases generadas por Tailwind, no se aplican a tus propias clases. Si deseas agregar el prefijo a tus propias clases, debes realizarlo en la definición de las mismas.
@layer utilities {
.tw-bg-brand-gradient {
/* ... */
}
}
Important
La opción important permite controlar o no las utilidades de Tailwind debe ser marcada como !important . Esto puede ser muy util cuando se utiliza Tailwind con CSS existente que utiliza dichos selectores.
Para generar utilidades como !important , asigna el valor true al índice important dentro de la configuración.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
important: true,
}
Con esto las clases de Tailwind generará clases marcadas como !important .
.leading-none {
line-height: 1 !important;
}
.leading-tight {
line-height: 1.25 !important;
}
.leading-snug {
line-height: 1.375 !important;
}
Esto también aplica a cualquier utilidad que se define en tu CSS utilizando la directiva @layer utilities .
@layer utilities {
.bg-brand-gradient {
background-image: linear-gradient(#3490dc, #6574cd);
}
}
/* Salida */
.bg-brand-gradient {
background-image: linear-gradient(#3490dc, #6574cd) !important;
}
Estrategia del selector
Establecer important como true puede introducir errores cuando se incorporan librerías de JavaScript que agrega inline-styles a tus elementos. En esos casos los utilities de Tailwind marcados como !important tendrán precedencia sobre los inline-styles.
Para prevenir esto, se puede establecer important a un selector ID como #app en su lugar.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
important: '#app',
}
Esta configuración agregará un prefijo a todas las utilidades con el selector provisto, incrementando efectivamente su enfoque sin convertirlo en !important .
Después de especificar el selector important , es necesario asegurarse que el elemento root del sitio coincide. Utilizando el ejemplo anterior, necesitaremos id de nuestro elemento root como app para que los estilos se apliquen correctamente.
Después de que la configuración se ha establecido y de que el elemento root coincide con el selector en la configuración de Tailwind, todas las utilidades de Tailwind tienen la suficiente precedencia para pasar por encima de las tras clases utilizadas en el proyecto son interferir con los inline styles.
<html>
<!-- ... -->
<style>
.high-specificity .nested .selector {
color: blue;
}
</style>
<body id="app">
<div class="high-specificity">
<div class="nested">
<!-- Will be red-500 -->
<div class="selector text-red-500">
<!-- ... -->
</div>
</div>
</div>
<!-- Will be #bada55 -->
<div class="text-red-500" style="color: #bada55;">
<!-- ... -->
</div>
</body>
</html>
Cuando se utiliza la estrategia del selector
#app, asegúrese de que el archivo del template en donde se incluye el el selector del root se encuentra incluido dentro de la configuración delcontent, de otra forma todo tu CSS será removido en producción.
El modificador important
De otra forma alternativa, se puede utilizar important agregando un caractér ! al inicio de la clase en el html.
<p class="font-bold !font-medium">
Esto sera font-medium incluso cuando bold sea especificado después en el
CSS.
</p>
El caracter ! va al inicio del nombre de la utilidad, después de cualquier variante, pero antes de cualquier prefijo.
<div class="sm:hover:!tw-font-bold"></div>
Esto puede ser útil en situaciones cuando se necesita ser mas específico debido a que te encuentras en un proyecto que es una batalla de estilos que no puedes controlar.
Separator (Separador)
La opción separator te permite personalizar el caractér que debe ser utilizado para separar modificadores (tamaños de pantalla, hover , focus , etc.) de los nombres de las utilidades ( text-center , items-end , etc.)
Utilizamos los dos puntos : , pero puede ser útil cambiar esto si estas usando un sistema de templates como Pug the no soporta el uso de caracteres especiales dentro de las clases.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
separator: '_',
}
Core Plugins (Plugins Base)
La sección corePlugins te permite deshabilitar clases que Tailwind genera normalmente por default si no se requieren en el proyecto.
Para deshabilitar estos plugins base, provee un objeto para corePlugins que establezca los valores de dichos plugins como false.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
float: false,
objectFit: false,
objectPosition: false,
},
}
Si por otro lado prefieres definir solamente la lista de plugins que deben ser habilitados, en lugar de un objeto, utiliza un arreglo que incluya la lista de los plugins base a utilizar.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: [
'margin',
'padding',
'backgroundColor',
// ...
],
}
Si deseas deshabilitar todos los plugins base y simplemente utilizar Tailwind para procesar tus propios plugins, utiliza un arreglo vacío.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: [],
}
Utilizar configuraciones múltiples
Para proyectos que requieran generar archivos CSS múltiples utilizando diferentes configuraciones de Tailwind, utiliza la directiva @config para especificar que archivo de configuración debe ser utilizado para cada entrada CSS.
// site.css
@config "./tailwind.site.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
// admin.css
@config "./tailwind.admin.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
Haciendo referencia en JavaScript
En ocasiones puede ser útil referenciar los valores de la configuración desde JavaScript, por ejemplo acceder a los valores de configuración del tema dinámicamente dentro de frameworks como React o Vue.
Para simplificar esto, Tailwind provee el helper resolveConfig que genera un objeto a partir de la configuración.
import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'
const fullConfig = resolveConfig(tailwindConfig)
fullConfig.theme.width[4]
// => '1rem'
fullConfig.theme.screens.md
// => '768px'
fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
Considera que esto propiciara un archivo final bastante grande, por lo que incrementará el tamaño final del paquete generado. Para prevenir esto, se recomiendo utilizar una herramienta como babel-plugin-preval para generar una versión estática de tu configuración en tiempo de ejecución.
Tipado en TypeScript
Tailwind ofrece soporte para los tipos del archivo tailwind.config.js, de forma que se provee soporte para la gama de IDEs en el mercado, y hace mas sencillo realizar cambios en la configuración sin tener que ir a la documentación de manera recurrente.
Los archivos de configuración creados con Tailwind CLI incluyen la notación de tipos necesarios por default, pero para configurar TypeScript de forma manual, solo añade el tipo de notación por encima del objeto de configuración.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// ...
],
theme: {
extend: {},
},
plugins: [],
}