Instalar Tailwind CSS con Parcel

Configuración de Tailwind CSS en un proyecto Parcel.

Crear tu proyecto

Comienza creando un nuevo proyecto Parcel si aún no tienes uno configurado. El enfoque más común es agregar Parcel como una dependencia de desarrollo a tu proyecto como se describe en su guía de inicio.

Terminal

mkdir my-projectcd my-projectnpm init -ynpm install parcelmkdir srctouch src/index.html

Instalar Tailwind CSS

Instala @tailwindcss/postcss y sus dependencias directas a través de npm.

Terminal

npm install tailwindcss @tailwindcss/postcss

Configurar PostCSS

Crea un archivo .postcssrc en la raíz de tu proyecto y habilita el plugin @tailwindcss/postcss.

.postcssrc

{  "plugins": {    "@tailwindcss/postcss": {}  }}

Importar Tailwind CSS

Crea un archivo ./src/index.css y añade un @import que importe Tailwind CSS.

index.css

@import "tailwindcss";

Iniciar tu proceso de compilación

Ejecuta tu proceso de compilación con npx parcel src/index.html.

Terminal

npx parcel src/index.html

Comenzar a usar Tailwind en tu proyecto

Añade tu archivo CSS al <head> y comienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.

index.html

<!doctype html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link href="./index.css" type="text/css" rel="stylesheet" />  </head>  <body>    <h1 class="text-3xl font-bold underline">      Hello world!    </h1>  </body></html>