DEV Community

Cover image for Instalar Tailwind via CLI junto con PostCSS & CSSnano
Axel Valdez
Axel Valdez

Posted on

Instalar Tailwind via CLI junto con PostCSS & CSSnano

#tailwindcss #postcss #cssnano #userinterface

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
Enter fullscreen mode Exit fullscreen mode

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

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

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

yarn add cssnano
Enter fullscreen mode Exit fullscreen mode

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

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

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")], };
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

@tailwind base; @tailwind components; @tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Paso 10: Agregamos nuestros scripts en nuestro package.json 

{ "scripts": { "tail": "postcss tailwind.css -o ./output/css/tailwind.css", } }
Enter fullscreen mode Exit fullscreen mode

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

https://github.com/axelvaldez13/tailwindcli

Top comments (0)