Instalar Tailwind CSS con Parcel

Configurando Tailwind CSS en un proyecto Parcel.

Crea tu proyecto

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

Terminal

mkdir my-project
cd my-project
npm init -y
npm install parcel
mkdir src
touch src/index.html

Instala Tailwind CSS

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

Terminal

npm install tailwindcss @tailwindcss/postcss

Configura PostCSS

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

.postcssrc

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

Importa Tailwind CSS

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

index.css

@import "tailwindcss";

Inicia tu proceso de build

Ejecuta tu proceso de build con npx parcel src/index.html.

Terminal

npx parcel src/index.html

Comienza a usar Tailwind en tu proyecto

Añade tu archivo CSS al <head> y comienza a usar las clases de utilidad de Tailwind para estilizar 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>