Configurando Svelte con Tailwind

Siguiendo la posta del artículo anterior cuando estábamos Conociendo Svelte, ahora les enseñaré como he realizado mi aproximación para configurar TailwindCSS en un proyecto con Svelte, si alguien quisiera ofrecer una propuesta de mejora puede hacerlo a este template en github (erianvc/svelte-tailwind).

Instalando las dependencias

Teniendo una vez su proyecto en Svelte se necesitarán las siguientes dependencias:

• @fullhuman/postcss-purgecss: Descarta los estilos CSS que no hayan sido utilizados.
• cross-env: Cambia el modo del proyecto a producción (si lo tienen instalado de manera global, lo pueden omitir).
• cssnano: Reduce el CSS de salida.
• npm-run-all: Permite ejecutar varios scripts simultáneamente.
• postcss-cli: Habilita una linea de comandos para la librería PostCSS.
• tailwindcss: La librería de utilidades para CSS.

Las cuales se instalarían con este comando:

npm i -D @fullhuman/postcss-purgecss cross-env cssnano npm-run-all postcss-cli tailwindcss

Configurando los archivos

Una vez instalados los paquetes procedemos a hacer las modificaciones respectivas. Empezaremos por crear el archivo de estilos de Tailwind, ahí se llamará a los componentes y utilidades de Tailwind además de poder agregar nuestras propias clases globales de CSS o estilos personalizados para posterior mente usarlos como clases, para ello lo situaremos en src/tailwind.css con el siguiente contenido:

/* src/tailwind.css */

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

Luego de eso crearemos el archivo de configuración para Tailwind, se puede hacer de manera sencilla usando el siguiente comando:

npx tailwind init

Eso nos creará un archivo tailwind.config.js en la raíz del archivo, para poder realizar las configuraciones que deseen.

Otro archivo que es necesario que se encuentre en la raíz del proyecto es postcss.config.js conteniendo lo siguiente:

//postcss.config.js

const tailwindcss = require("tailwindcss");

const cssnano = require("cssnano")({ preset: 'default', });

// only needed if you want to purge
const purgecss = require("@fullhuman/postcss-purgecss")({
    content: ["./src/**/*.svelte", "./public/**/*.html"],
    defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
    plugins: [
        tailwindcss("./tailwind.config.js"),

        // minify the css only in production
        ...(process.env.NODE_ENV === "production" ? [cssnano] : []),

        // only needed if you want to purge
        ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
    ]
};

Aquí básicamente se está configurando como será tratado el CSS después de su compilación, llamando la librería de Tailwind como un plugin del cual todo su contenido será reducido por cssnano y minificado por purgecss solo en producción.

Por último lo que tendremos que modificar serán los scripts en package.json de la siguiente manera:

• "start": "sirv public": Es un middleware liviano que atiende las solicitudes de los archivos estáticos en la carpeta public/, no lo usaremos de manera directa ya que rollup se encargará de llamarlo cuando se use el script dev.
• "autobuild":"rollup -c -w": Hace que rollup compile Svelte y se mantenga escuchando cambios. Lo usaremos mientras estemos en la etapa de desarrollo para ver los cambios realizarse en caliente.
• "dev": "run-p watch:tailwind autobuild": Este script llama al comando watch:tailwind y autobuild.
• "build": "npm run build:tailwind && rollup -c": Este script lo usaremos cuando se tenga que compilar el CSS y Svelte en modo de producción.
• "watch:tailwind": "postcss src/tailwind.css -o public/global.css -w": Este comando hace que se mantenga el archivo tailwind.css y tailwind.config.js vigilados para colocar su resultado en public/global.css.
• "build:tailwind": "cross-env NODE_ENV=production postcss src/tailwind.css -o public/global.css": Con este se genera los estilos CSS de Tailwind en un formato para producción.

Quedando el contenido del package.json de esta manera:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "start": "sirv public",
    "autobuild":"rollup -c -w",
    "dev": "run-p watch:tailwind autobuild",
    "build": "npm run build:tailwind && rollup -c",
    "watch:tailwind": "postcss src/tailwind.css -o public/global.css -w",
    "build:tailwind": "cross-env NODE_ENV=production postcss src/tailwind.css -o public/global.css"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^2.0.6",
    "@rollup/plugin-commonjs": "^11.0.0",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "cross-env": "^7.0.0",
    "cssnano": "^4.1.10",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^7.1.0",
    "rollup": "^1.20.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0",
    "tailwindcss": "^1.1.4"
  },
  "dependencies": {
    "sirv-cli": "^0.4.4"
  }
}

Con esto ya se tiene un proyecto en Svelte preparado para trabajar con Tailwind.