Instalar Tailwind CSS con Rspack

Configurando Tailwind CSS en un proyecto Rspack.

Crea tu proyecto

Comienza creando un nuevo proyecto Rspack si aún no tienes uno configurado. El enfoque más común es usar Rspack CLI.

Terminal

npm create rspack@latest

Instala Tailwind CSS

Instala @tailwindcss/postcss y sus dependencias peer.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

Habilita el soporte para PostCSS

En tu archivo rspack.config.js, habilita el cargador de PostCSS. Consulta la documentación para obtener más información.

rspack.config.ts

export default defineConfig({
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["postcss-loader"],
        type: "css",
      },
      // ...
    ],
  },
}

Configura los plugins de PostCSS

Crea un archivo postcss.config.mjs en la raíz de tu proyecto y añade el plugin @tailwindcss/postcss a tu configuración de PostCSS.

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Importa Tailwind CSS

Añade un @import a ./src/style.css que importe Tailwind CSS.

style.css

@import "tailwindcss";

Inicia tu proceso de build

Ejecuta tu proceso de build con npm run dev.

Terminal

npm run dev

Comienza a usar Tailwind en tu proyecto

Comienza a usar las clases de utilidad de Tailwind para estilizar tu contenido.

App.vue

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

Instalar Tailwind CSS con Rspack

Usando React

Usando Vue

Crea tu proyecto

Instala Tailwind CSS

Habilita el soporte para PostCSS

Configura los plugins de PostCSS

Importa Tailwind CSS

Inicia tu proceso de build

Comienza a usar Tailwind en tu proyecto