Tailwind CSS Integration

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

Diese Anleitung hilft Ihnen dabei, 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 stark 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/solid-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/solid-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, anstatt der Konfigurationsdatei in Version 4. Sie können dies tun, indem Sie eine src/styles/app.css-Datei erstellen oder sie beliebig benennen.

CSS

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

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

Importieren Sie die CSS-Datei in Ihre __root.tsx-Datei

Importieren Sie die CSS-Datei in Ihre __root.tsx-Datei mit dem ?url-Query und stellen Sie sicher, dass Sie die dreifache Schrägstrich-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,
})

Verwenden Sie Tailwind CSS überall in Ihrem Projekt

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

tsx

// src/routes/index.tsx
import { createFileRoute } from '@tanstack/solid-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/solid-router'

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

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

Das ist alles! 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

Konfigurieren Sie Ihre Template-Pfade

Fügen Sie die Pfade zu allen Ihren Template-Dateien in der tailwind.config.js-Datei hinzu.

// 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: [],
}

Fügen Sie die Tailwind-Direktiven zu Ihrer CSS-Datei hinzu

Fügen Sie die @tailwind-Direktiven für jede von Tailwinds Schichten 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 Importieren Sie die CSS-Datei in Ihre __root.tsx-Datei, um zu sehen, wie die CSS-Datei in Ihre __root.tsx-Datei importiert wird.

Tailwind CSS Version 4 (Neueste)

Tailwind CSS installieren

Das Vite-Plugin konfigurieren

Tailwind in Ihre CSS-Datei importieren

Importieren Sie die CSS-Datei in Ihre __root.tsx-Datei

Verwenden Sie Tailwind CSS überall in Ihrem Projekt

Tailwind CSS Version 3 (Legacy)

Tailwind CSS installieren

Konfigurieren Sie Ihre Template-Pfade

Fügen Sie die Tailwind-Direktiven zu Ihrer CSS-Datei hinzu

Bytes abonnieren

Bytes abonnieren