¿Qué son los pre-procesadores?
Debido a que Tailwind utiliza el plugin PostCSS, es posible también utilizar Sass, Less, Stylus o cualquier otro pre-procesador, de igual forma que se hace con los plugins PostCSS como Autoprefixer.
Utilizando PostCSS como pre-procesador
Si estas utilizando Tailwind para un proyecto nuevo y no has integrado Sass, Less o Stylus, probablemente consideres utilizar el plugin de PostCSS para pre-procesar los estilos.
Esto tiene los siguientes beneficios:
1. Los builds (compilación) se ejecutarán mas rápidos
Debido a que el CSS no tiene que ser parseado y procesado por múltiples herramientas, así que el CSS se compilará mucho mas rápido solo con PostCSS.
2. No hay necesidad de utilizar workarounds
Debido a que Tailwind añade algunas palabras no estándar al CSS como @tailwind, @apply y theme(), se requiere escribir el css en una forma molesta y no intuitiva para poder hacer que el procesador genere el resultado esperado. Al trabajar exclusivamente con PostCSS evitamos esto.
Para una lista completa de todos los plugins de PostCSS, revisa la Página oficial de plugins de PostCSS.
La siguiente es una recomendación de plugins útiles.
Imports en tiempo de ejecución
Una de las características de un pre-procesador es la habilidad de organizar el CSS en archivos múltiples y combinarlos durante el compilado al procesar la sentencia @import de forma adelantada y no en el navegador.
El plugin postcss-import nos permite realizar esta tarea.
Para utilizar el plugin:
npm i -D postcss-import
Después para agregarlo como el primer plugin en la configuración de PostCSS.
// postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
},
}
Una consideración importante acerca de postcss-import es que adhiere estrictamente a la especificación CSS y deshabilita la sentencia @import de cualquier parte excepto al inicio de cada archivo.
Ejemplo no funcionará…
/* components.css */
.btn {
padding: theme('spacing.4') theme('spacing.2');
}
@import './components/card';
La solución mas sencilla a este problema es nunca mezclar CSS con los imports en un mismo archivo y en lugar de ello crear un archivo de entrada para todos los imports requeridos, manteniendo el CSS en archivos separados.
/* components.css */
@import './components/buttons.css';
@import './components/card.css';
/* components/buttons.css */
.btn {
padding: theme('spacing.4') theme('spacing.2');
}
/* components/card.css */
.card {
padding: theme('spacing.4');
}
El lugar mas frecuente en donde esto se requiere es dentro del archivo principal en donde se encuentran las declaraciones de tailwind.
Esto no funcionará…
@tailwind base;
@import './custom-base-styles.css';
@tailwind components;
@import './custom-components.css';
@tailwind utilities;
@import './custom-utilities.css';
Puedes solucionar esto creando archivos separados para cada declaración de @tailwind y después importar esos archivos en la hoja de estilo principal. Para hacer esto mas sencillo, se proveen archivos individuales para cada declaración @tailwind.
Forma correcta de organizar el archivo main…
@import 'tailwindcss/base';
@import './custom-base-styles.css';
@import 'tailwindcss/components';
@import './custom-components.css';
@import 'tailwindcss/utilities';
@import './custom-utilities.css';
Anidación
Para agregar soporte para declaraciones anidadas, se recomienda el plugin tailwind/nesting, el cual es un plugin de PostCSS que incluye postcss-nested o postcss-nesting con una capa de compatibilidad que entienda la sintaxis específica como @apply y @screen.
El plugin se incluye con tailwindcss, asi que puede ser utilizado directamente en la configuración de PostCSS, antes de tailwind.
// postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
}
Por default se utiliza postcss-nested que utiliza una sintaxis como sass, pero si se desea utilizar postcss-nesting se requiere instalarlo utilizando…
npm i -D postcss-nesting
Después pasa el plugin como argumento dentro de tailwind/nesting en la configuración de PostCSS.
// postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
}
Esto puede ser útil cuando por alguna razón es necesario especificar una versión de postcss-nested.
Variables
En la actualidad, las variables o propiedades son ampliamente soportadas por los navegadores, de tal forma que no hay necesidad de pre-procesar variables.
:root {
--theme-color: #52b3d0;
}
/* ... */
.btn {
background-color: var(--theme-color);
/* ... */
}
Una de las casos en los cuales se utiliza variables es en la función theme() que accesa todas las partes de tu archivo tailwind.config.js directo desde el CSS.
.btn {
background-color: theme('colors.blue.500');
padding: theme('spacing.2') theme('spacing.4');
/* ... */
}
Autoprefixer
Para el manejo automático de los prefijos en los archivos CSS, utiliza autoprefixer.
Instalación de autoprefixer.
npm i -D autoprefixer
Para agregarlo en la configuración de PostCSS.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Uso de Sass, Less o Stylus como pre-procesador
Para mejorar la experiencia de desarrollo, se recomienda utilizar PostCSS exclusivamente y ningún otro pre-procesador como Sass, Less o Stylus dentro de tus proyectos tailwind.
Cuando se combina tailwind con alguno de estos pre-procesadores se requiere agregar un paso adicional a tu proyecto que le permita pre-procesar CSS a través de PostCSS.
La parte mas importante de entender es que hay inconsistencias en el uso de las sintaxis de tailwind como theme(), !important @screen @apply.