Instalar Tailwind via CLI junto con PostCSS & CSSnano

Lo bueno de tailwind css es que podemos instalarlo de diferentes maneras, entre ellas, via CDN o via CLI. En este caso, vamos a hacerlo via npm o yarn o el gestor de paquetes de su preferencia.

Paso 1: armar nuestro entorno

En mi caso, voy a instalarlo mientras uso un framework de js llamado mithril (donde hablare en algun post proximo que se viene). Para continuar con nuestra instalación vamos armar nuestro entorno y el output (ambos deben tener la carpeta css, muy importante).

Paso 2: instalar tailwind

Procedemos a instalar nuestras dependencias en nuestra terminal amiga con los siguientes comandos

yarn add tailwindcss postcss postcss-cli autoprefixer --dev
yarn add @tailwindcss/forms

Paso 4: creamos nuestro archivo tailwind.config.js junto con nuestro postcss.config.js via terminal 

npx tailwindcss init -p

Paso 5: vamos a integrar cssnano para minificar nuestro css de desarrollo 

yarn add cssnano

Paso 6: copiamos y pegamos este codigo en postcss.config.js 

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("cssnano")({
      preset: "default",
    }),
    require("autoprefixer"),
  ],
};

Paso 7: Agregamos tailwind/forms a nuestro tailwind.config.js 

module.exports = {
  purge: ["./*.html", "./*.js"], 
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
};

Paso 8: Creamos nuestro html 

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Template Tailwind</title>
  <link rel="stylesheet" href="css/tailwind.css" />
</head>

<body>
  <script type="text/javascript" src="js/App.js"></script>
</body>

</html>

Paso 9: creamos nuestro archivo tailwind.css en nuestro entorno y hacemos un copy / paste de este codigo 

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

Paso 10: Agregamos nuestros scripts en nuestro package.json 

{
  "scripts": {
    "tail": "postcss tailwind.css -o ./output/css/tailwind.css",
  }
}

Si querés chusmear como quedo mi entorno metete a este repo :)

29

Tags:

TailwindcssPostcssCssnanoUserinterface