Tailwind CSS Integration

Sie möchten also Tailwind CSS in Ihrem TanStack Start-Projekt verwenden?

Diese Anleitung hilft Ihnen, Tailwind CSS in Ihrem TanStack Start-Projekt zu verwenden.

Tailwind CSS Version 4 (Neueste)

Die neueste Version von Tailwind CSS ist 4. Und sie hat einige Konfigurationsänderungen, die sich erheblich von Tailwind CSS Version 3 unterscheiden. Es ist einfacher und empfohlen, Tailwind CSS Version 4 in einem TanStack Start-Projekt einzurichten, da TanStack Start Vite als Build-Tool verwendet.

Tailwind CSS installieren

Installieren Sie Tailwind CSS und sein Vite-Plugin.

Shell

npm install tailwindcss @tailwindcss/vite

npm install tailwindcss @tailwindcss/vite

Das Vite-Plugin konfigurieren

Fügen Sie das @tailwindcss/vite-Plugin zu Ihrer Vite-Konfiguration hinzu.

// vite.config.ts
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [tsConfigPaths(), tanstackStart(), tailwindcss()],
})

// vite.config.ts
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [tsConfigPaths(), tanstackStart(), tailwindcss()],
})

Tailwind in Ihre CSS-Datei importieren

Sie müssen eine CSS-Datei erstellen, um Tailwind CSS zu konfigurieren, anstelle der Konfigurationsdatei in Version 4. Dies können Sie tun, indem Sie eine src/styles/app.css-Datei erstellen oder sie nach Belieben benennen.

CSS

/* src/styles/app.css */
@import 'tailwindcss';

/* src/styles/app.css */
@import 'tailwindcss';

Die CSS-Datei in Ihrer __root.tsx-Datei importieren

Importieren Sie die CSS-Datei in Ihre __root.tsx-Datei mit dem ?url-Query und stellen Sie sicher, dass Sie die **dreifach schräge** Direktive am Anfang der Datei hinzufügen.

tsx

// src/routes/__root.tsx
/// <reference types="vite/client" />
// other imports...

import appCss from '../styles/app.css?url'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      // your meta tags and site config
    ],
    links: [{ rel: 'stylesheet', href: appCss }],
    // other head config
  }),
  component: RootComponent,
})

// src/routes/__root.tsx
/// <reference types="vite/client" />
// other imports...

import appCss from '../styles/app.css?url'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      // your meta tags and site config
    ],
    links: [{ rel: 'stylesheet', href: appCss }],
    // other head config
  }),
  component: RootComponent,
})

Tailwind CSS überall in Ihrem Projekt verwenden

Sie können Tailwind CSS jetzt überall in Ihrem Projekt verwenden.

tsx

// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Home,
})

function Home() {
  return <div className="bg-red-500 text-white p-4">Hello World</div>
}

// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Home,
})

function Home() {
  return <div className="bg-red-500 text-white p-4">Hello World</div>
}

Das war's! Sie können Tailwind CSS jetzt überall in Ihrem Projekt verwenden 🎉.

Tailwind CSS Version 3 (Legacy)

Wenn Sie Tailwind CSS Version 3 verwenden möchten, können Sie die folgenden Schritte ausführen.

Tailwind CSS installieren

Installieren Sie Tailwind CSS und seine Peer-Abhängigkeiten.

Shell

npm install -D tailwindcss@3 postcss autoprefixer

npm install -D tailwindcss@3 postcss autoprefixer

Generieren Sie dann die Tailwind- und PostCSS-Konfigurationsdateien.

Shell

npx tailwindcss init -p

npx tailwindcss init -p

Ihre Vorlagenpfade konfigurieren

Fügen Sie die Pfade zu allen Ihren Vorlagendateien in die tailwind.config.js-Datei ein.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Die Tailwind-Direktiven zu Ihrer CSS-Datei hinzufügen

Fügen Sie die @tailwind-Direktiven für jede der Ebenen von Tailwind zu Ihrer src/styles/app.css-Datei hinzu.

CSS

/* src/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* src/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Hinweis

Springen Sie zu Die CSS-Datei in Ihrer __root.tsx-Datei importieren, um zu sehen, wie Sie die CSS-Datei in Ihrer __root.tsx-Datei importieren.

Tailwind CSS Version 4 (Neueste)

Tailwind CSS installieren

Das Vite-Plugin konfigurieren

Tailwind in Ihre CSS-Datei importieren

Die CSS-Datei in Ihrer __root.tsx-Datei importieren

Tailwind CSS überall in Ihrem Projekt verwenden

Tailwind CSS Version 3 (Legacy)

Tailwind CSS installieren

Ihre Vorlagenpfade konfigurieren

Die Tailwind-Direktiven zu Ihrer CSS-Datei hinzufügen

Bytes abonnieren

Bytes abonnieren