Next.js Tailwind CSS

Die Verwendung von Tailwind CSS in einem Next.js-Projekt ist eine sehr beliebte Wahl, da es einen Utility-First-Ansatz für das Schreiben von CSS bietet, mit dem du Stile direkt in Klassennamen anwenden kannst. Dieser Ansatz macht das Schreiben von Stilen prägnanter und intuitiver.

Tailwind CSS Tutorial:https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Offizielle Website von Tailwind CSS:https://tailwindcss.com/

GitHub-Adresse:https://github.com/tailwindlabs/tailwindcss

Tailwind CSS ist ein leistungsstarkes CSS-Framework, das das Schreiben von Stilen durch einen Utility-First-Ansatz prägnanter und modularer macht. Im Gegensatz zu traditionellen klassenbasierten CSS-Frameworks bietet Tailwind eine Reihe von Low-Level-Utility-Klassen, die direkt auf HTML-Elemente angewendet werden können, um schnell und flexibel benutzerdefinierte Designs zu erstellen.

Im Folgenden sind die detaillierten Schritte zur Verwendung von Tailwind CSS in einem Next.js-Projekt.

1. Tailwind CSS installieren

Wenn du ein neues Next.js-Projekt von Grund auf erstellst, kannst du create-react-app verwenden. Wenn du bereits ein bestehendes React-Projekt hast, kannst du den Schritt zur Projekterstellung überspringen.

Erstelle ein neues Next.js-Projekt:

npx create-next-app@latest my-next-app

Während der Erstellung werden Sie gefragt, ob Tailwind CSS installiert werden soll, und wir können Ja auswählen:

...
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
...

Tailwind CSS installieren

Sie können auch den folgenden Befehl in Ihrem Projektverzeichnis ausführen, um Tailwind CSS und seine erforderlichen Abhängigkeiten zu installieren:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Dadurch werden eine tailwind.config.ts-Datei und eine postcss.config.mjs-Datei erstellt.

2. Tailwind CSS konfigurieren

Fügen Sie in der Tailwind-Konfigurationsdatei tailwind.config.ts die Dateipfade hinzu, in denen Tailwind-Klassennamen verwendet werden.

Im Allgemeinen ist es standardmäßig konfiguriert, sodass wir es nicht ändern müssen:

Beispiel

import type { Config } from "tailwindcss";

export default {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}", // Beachten Sie, dass das app-Verzeichnis hinzugefügt wurde.
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
} satisfies Config;

Wir müssen die Datei postcss.config.mjs nicht ändern.

3. Tailwind-Basisstile hinzufügen

Füge Tailwind CSS-Direktiven zum globalen Stylesheet der Anwendung hinzu. Tailwind wird diese Direktiven verwenden, um die von ihm generierten Stile einzufügen.

Öffne in deinem Projekt die Datei app/globals.css und füge den folgenden Inhalt hinzu, um Tailwinds Basisstile, Komponentenstile und Utility-Stile einzubinden:

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Importiere das globals.css-Stylesheet im Root-Layout app/layout.tsx, um die Stile auf jede Route in der Anwendung anzuwenden:

Beispiel

// app/layout.tsx
// Diese Stile werden auf jede Route in der Anwendung angewendet
import './globals.css'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>{children}</body>
</html>
)
}

4. Verwende Tailwind CSS, um Stile zu schreiben

Nachdem du Tailwind CSS installiert und globale Stile hinzugefügt hast, kannst du Tailwinds Utility-Klassen in deiner Anwendung verwenden:

Code der Datei app/page.tsx:

// app/page.tsx
export default function Home() {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="bg-white p-8 rounded-lg shadow-lg">
<h1 className="text-2xl font-bold text-gray-900">Hallo, BEISPIEL!</h1>
<p className="mt-4 text-gray-600">Beispiel-Tutorial: Was du lernst, ist nicht nur Technologie, sondern auch ein Traum!</p>
<button className="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
Klick mich zum Ausprobieren
</button>
</div>
</div>
);
}

Ausführen:

npm run dev

Öffne dann deinen Browser und navigiere zu http://localhost:3000, und du solltest eine einfache React-Anwendung sehen, die mit Tailwind CSS gestylt ist.

Mit den oben genannten Schritten hast du Tailwind CSS erfolgreich in dein Next.js-Projekt integriert und damit Stile geschrieben. Die Utility-Klassennamen von Tailwind CSS ermöglichen es dir, deinen Komponenten schnell Stile hinzuzufügen und den Stilcode dabei prägnant und modular zu halten.

Andere Erweiterungen