Instalar Tailwind CSS con TanStack Start

Configuración de Tailwind CSS en un proyecto TanStack Start.

Crear tu proyecto

Comienza creando un nuevo proyecto TanStack Start si aún no tienes uno configurado. El enfoque más común es utilizar Create Start App.

Terminal

npx create-start-app@latest my-projectcd my-project

Instalar Tailwind CSS

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

Terminal

npm install tailwindcss @tailwindcss/vite

Configurar el plugin de Vite

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

vite.config.ts

import { tanstackStart } from '@tanstack/react-start/plugin/vite';import { defineConfig } from 'vite';import tsConfigPaths from 'vite-tsconfig-paths';import tailwindcss from '@tailwindcss/vite'export default defineConfig({  plugins: [    tailwindcss()    tanstackStart(),    tsConfigPaths(),  ]});

Importar Tailwind CSS

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

src/styles.css

@import "tailwindcss";

Importar el archivo CSS en tu ruta raíz

Importa el archivo CSS en tu archivo __root.tsx con la consulta ?url.

src/routes/__root.tsx

// other imports...import appCss from '../styles.css?url'export const Route = createRootRoute({  head: () => ({    meta: [      // your meta tags and site config    ],    links: [{ rel: 'stylesheet', href: appCss }],    // other head config  }),  component: RootComponent,})

Comenzar a usar Tailwind en tu proyecto

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

src/routes/index.tsx

import { createFileRoute } from '@tanstack/react-router'export const Route = createFileRoute('/')({  component: App,})function App() {  return (    <h1 class="text-3xl font-bold underline">      Hello World!    </h1>  )}