Como instalar y configurar tailwind usando PostCSS [Es]
Tags: tailwindcss, tutorial, css, html
Published: 2022-11-27 21:27:59

Hola! aquí Hector 😄, espero se encuentren de lo mejor. Les comparto este post para la gente que haya o este empezando a iniciar con TailwindCss. 

**¿Que es TailwindCSS?**
Bueno Tailwind CSS es un framework de CSS, que permite un desarrollo agíl y podemos hacer uso de este sin salirnos de nuestros archivos .html donde colocaremos clases las cuales hacen referencia a estilos de css.
[Página oficial Tailwindcss](https://tailwindcss.com/)

## Configuración e Instalación 🗃

- Inicializamos un proyecto

```
npm init -y
```
También podemos usar la siguiente sintaxis, para configurlo manualmente
```
npm init
```

- Instalamos dependencias

```
npm install -D tailwindcss postcss-cli autoprefixer
```
Verificamos que se hayan instalado correctamente, llendo a nuestro package.json

![Imagen de package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u02sz761odigm2p1qwm.png)

- Luego...
```
npx tailwindcss init
```
- Creamos un archivo llamado **postcss.config.js** y agregamos lo siguiente:
```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```
- Abriremos el documento tailwind.config.js que creamos con **npx** anteriormente y agremos...
```
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
**Importante: donde dice 'src' podemos cambiar la carpeta la cual contendra nuestros documentos .html o .js si trabajas con react. En mi caso creare una llamada 'build' y solo usaré Tailwind para html**

![Tailwind Configuracion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onupfdwr9mtixyk07uyp.png)

- Creamos dicha carpeta dentro de nuestro proyecto, yo estoy trabajando con Windows 10, por lo tanto usaré **'mkdir'**.

![Imagen build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5qg17yxjm6shqxfc3gs.png)

- Creamos nuestros documentos .html o .js en dicha carpeta

![Imagen html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zajekwvqf76g1819iwyz.png)

- Ahora para compilar todo tailwind css para que el navegador lo procese, crearemos otra carpeta llamada **'src'** y dentro de 'src' también otra llamada **'css'**

![Imagen root](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uegvpkavwvrs4e9de5t0.png)

![Imagen css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mup3fuqd64wxwbw5t5hc.png)

- Dentro de la carpeta css, añadiremos un archivo llamado **'tailwind.css'** el cual tendra: 
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- Nos iremos a nuestro archivo **'package.json'** para agregar un watch el cual cuando nosotros hagamos cambios y guardemos lo hará al momento con un live-server. Dicho esto, donde dice 'scripts':

![Imagen package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0se47dqzv4t05ze9gpd5.png)

Lo cambiaremos por:

```
"watch": "postcss ./src/css/tailwind.css -o ./build/output.css --watch"
```
![imagen package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fj46wmxnx9peltprxyz.png)

Ahora en nuestra terminal ponemos lo siguiente para compilar
```
npm run watch
```
Watch porque ese es el nombre que le asignamos cuando cambialos el bloque de 'test' aunque se puede cambiar. Si ejecutamos nos arrojara esto:

![terminal tailwindcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lwrq8or2xgon6bc9l6k.png)

luego le damos **Ctrl + C** para salirnos y nos vamos a checar en nuestra carpeta build si se creo un archivo llamado **'output.css'**.

![salida tailwindcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h0ysyd6jmw8zdgzeffh.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35v45jqnmromg6ltk8r7.png)

Por último nos vamos a nuestro html creado e importamos la hoja de estilos llamada **'output.css'**

![Imagen importando css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65d1czud288m75e77ko1.png)

Probamos...

![tailwind en html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0yv9q5p2bjt1yzhykdd.png)

Listo!!! 🎉 haz configurado Tailwind 😎.