34
loading...
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.
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).
Procedemos a instalar nuestras dependencias en nuestra terminal amiga con los siguientes comandos
yarn add tailwindcss postcss postcss-cli autoprefixer --dev
yarn add @tailwindcss/formsnpx tailwindcss init -pyarn add cssnanomodule.exports = {
plugins: [
require("tailwindcss"),
require("cssnano")({
preset: "default",
}),
require("autoprefixer"),
],
};module.exports = {
purge: ["./*.html", "./*.js"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require("@tailwindcss/forms")],
};<!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>@tailwind base;
@tailwind components;
@tailwind utilities;{
"scripts": {
"tail": "postcss tailwind.css -o ./output/css/tailwind.css",
}
}34