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",
}
}
Top comments (0)