En el blog ya he escrito sobre cómo usar TailwindCSS con Vue 3 y Vite, pero no he hablado sobre cómo usarlo sin ningún framework, es decir, usar Tailwind CSS con HTML plano y puro, cosa que sí es totalmente posible.

Usar TailwindCSS sin frameworks

En este caso vas a necesitar contar con Node y NPM instalados. No te preocupes, los resultados van a ejecutarse del lado del cliente, pero estas son las herramientas que necesitamos para “compilar” el CSS y las clases de Tailwind a un archivo CSS final.

Comienza instalando lo siguiente:

npm install -D tailwindcss postcss autoprefixer

Luego navega al directorio raíz de tu proyecto y ejecuta:

npx tailwindcss init -p

Ahora vamos a configurar todos aquellos archivos en donde queremos que las clases de Tailwind funcionen. Para ello, configuramos el tailwind.config.js que primero se debe ver así:

/** @type {import('tailwindcss').Config} */module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Vamos a agregar ubicaciones relativas a ese archivo en content. En mi caso tengo mis archivos del frontend en la carpeta public, que es hermana de tailwind.config.js, así que lo configuro así:

content: ["./public/**/*.{html,js}"],

Lo he hecho así porque tengo clases de TailwindCSS en mi HTML, pero también voy a agregar algunas de ellas con JavaScript, por ello es que están las llaves {html,js}.

Siempre puedes agregar más ubicaciones a esa carpeta.

Creando archivo CSS base

Después debes crear un archivo de estilos CSS plano, que puede o no tener tus propios estilos. Este será el archivo antes de ser transformado. Yo lo he agregado en la carpeta public y lo he llamado estilos_entrada.css, quedando así:

@tailwind base;
@tailwind components;
@tailwind utilities;

Ahora vamos a ejecutar el “demonio” de Tailwind CSS para que vigile los cambios y los transforme, tomando los estilos de entrada como la base, y generando la salida (tomando en cuenta el HTML y las clases usadas en otro archivo) en estilos.css:

npx tailwindcss -i ./public/estilos_entrada.css -o ./public/estilos.css --watch

Lo que debes importar en tu HTML es estilos.css (el archivo de salida y transformado por Tailwind, mismo que será generado cada vez que sea necesario):

<link rel="stylesheet" href="./estilos.css">

Haz los cambios que sean necesarios y cuando ya estés contento con tu diseño, genera el archivo CSS definitivo y minificado.

Compilar CSS

Ahora es el momento de que Tailwind lea las clases usadas en nuestros archivos base y agregue lo necesario en el archivo CSS resultante, minificando lo necesario.

Para ello ejecuta:

npx tailwindcss -i ./public/estilos_entrada.css -o ./public/estilos.css --minify

Recuerda: estilos_entrada.css son la base. Si tienes estilos globales CSS que quieres aplicar, aplícalos aquí. El archivo estilos.css son la salida, no debes hacer cambios en él ya que es automáticamente generado. Ese archivo es el que debes importar en el HTML.

No olvides revisar las rutas y la configuración de Tailwind. Puedes nombrar a los archivos como prefieras, yo solo he colocado un ejemplo de cómo usar Tailwind sin frameworks. Al final vas a tener un archivo CSS que no va a depender de ninguna herramienta externa.