Configurando Svelte con Tailwind
Tags: svelte, tailwindcss, webdev, spanish
Published: 2020-02-05 02:56:20

Siguiendo la posta del artículo anterior cuando estábamos [Conociendo Svelte](https://dev.to/erianvc/conociendo-svelte-3l7a), ahora les enseñaré como he realizado mi aproximación para configurar [TailwindCSS](https://tailwindcss.com/) en un proyecto con [Svelte](https://svelte.dev/), si alguien quisiera ofrecer una propuesta de mejora puede hacerlo a este [template en github (erianvc/svelte-tailwind)](https://github.com/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:

```bash
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:

```css
/* 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:

```bash
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:

```javascript
//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:

```json
{
  "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.