Instalar Tailwind CSS con SolidJS

Configurando Tailwind CSS en un proyecto SolidJS.

Crea tu proyecto

Comienza creando un nuevo proyecto SolidJS si aún no tienes uno configurado. El enfoque más común es usar la plantilla Vite de SolidJS.

Terminal

npx degit solidjs/templates/js my-project
cd my-project

Instala Tailwind CSS

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

Terminal

npm install tailwindcss @tailwindcss/vite

Configura el plugin de Vite

Añade el plugin @tailwindcss/vite a tu configuración de Vite.

vite.config.ts

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
  plugins: [
    tailwindcss(),
    solidPlugin(),
  ],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
});

Importa Tailwind CSS

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

index.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.jsx

export default function App() {
  return (
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}