驴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.