Einrichten eines Tailwind-CSS-Projekts von Grund auf

Einrichten eines Tailwind-CSS-Projekts von Grund auf

Tailwind CSS ist bei Entwicklern aufgrund seines auf den Nutzen ausgerichteten Styling-Ansatzes zu einer beliebten Wahl geworden. Es bietet eine hochgradig anpassbare und effiziente Möglichkeit, Webanwendungen zu entwerfen, ohne benutzerdefiniertes CSS schreiben zu müssen. In diesem Leitfaden führen wir Sie durch die Einrichtung eines Tailwind-CSS-Projekts von Grund auf.

Inhaltsverzeichnis

1. Einführung in Tailwind CSS
2. Voraussetzungen
3. Ein neues Projekt einrichten
4. Tailwind CSS installieren
5. Tailwind CSS konfigurieren
6. Erstellen Sie Ihre erste Tailwind-CSS-Datei
7. CSS erstellen und ansehen
8. Optimierung für die Produktion
9. Fazit

Einführung in Tailwind CSS

Tailwind CSS ist ein Utility-First-CSS-Framework, das Low-Level-Utility-Klassen bereitstellt, um benutzerdefinierte Designs direkt in Ihrem Markup zu erstellen. Im Gegensatz zu herkömmlichen CSS-Frameworks wie Bootstrap oder Foundation enthält Tailwind keine vorgefertigten Komponenten. Stattdessen stellt es eine Reihe von Hilfsklassen bereit, mit denen Sie Ihre Komponenten entwerfen können, ohne Ihren HTML-Code zu verlassen.

Warum Tailwind CSS verwenden?

• Utility-First-Ansatz: Ermöglicht Ihnen die direkte Anwendung von Stilen in Ihrem HTML, wodurch der Bedarf an benutzerdefiniertem CSS reduziert wird.
• Anpassung: Tailwind ist hochgradig anpassbar, sodass Sie Standardeinstellungen überschreiben und Ihr einzigartiges Designsystem erstellen können.
• Responsive Design: Tailwind bietet integrierte Responsive-Design-Dienstprogramme, mit denen Sie ganz einfach Mobile-First-Designs erstellen können.
• Konsistenz: Sorgt für ein einheitliches Design in Ihrer gesamten Anwendung.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie Folgendes installiert haben:

• Node.js (v12 oder höher)
• npm (Node Package Manager)

Sie können Node.js und npm von der offiziellen Website herunterladen und installieren.

Ein neues Projekt einrichten

Erstellen Sie zunächst ein neues Verzeichnis für Ihr Projekt und navigieren Sie dorthin:

mkdir tailwind-project
cd tailwind-project

Als nächstes initialisieren Sie ein neues NPM-Projekt:

npm init -y

Dieser Befehl erstellt eine package.json-Datei, die Ihre Projektabhängigkeiten und Skripte verfolgt.

Tailwind CSS installieren

Um Tailwind CSS zu installieren, müssen Sie es als Abhängigkeit zu Ihrem Projekt hinzufügen. Führen Sie den folgenden Befehl aus:

npm install tailwindcss

Nach der Installation von Tailwind CSS müssen Sie eine Konfigurationsdatei erstellen. Mit dieser Datei können Sie die Standardeinstellungen von Tailwind CSS anpassen. Um diese Datei zu generieren, führen Sie Folgendes aus:

npx tailwindcss init

Dieser Befehl erstellt eine tailwind.config.js-Datei in Ihrem Projektstammverzeichnis. In dieser Datei können Sie Ihr Tailwind-Setup anpassen.

Konfigurieren von Tailwind CSS

Öffnen Sie die Datei tailwind.config.js. Sie sollten eine Grundkonfiguration wie diese sehen:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Das Inhaltsarray wird verwendet, um die Pfade zu allen Ihren Vorlagendateien anzugeben. Dadurch kann Tailwind ungenutzte Stile in der Produktion auf den Kopf stellen. Fügen Sie die Pfade zu Ihren HTML- und JavaScript-Dateien hinzu:

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Diese Konfiguration weist Tailwind an, in jeder .html- oder .js-Datei im src-Verzeichnis nach Klassen zu suchen.

Erstellen Sie Ihre erste Tailwind-CSS-Datei

Als nächstes erstellen Sie eine neue CSS-Datei, in die Sie die Basis-, Komponenten- und Dienstprogrammstile von Tailwind importieren. Erstellen Sie ein src-Verzeichnis und darin eine Datei mit dem Namen „styles.css:
“.

mkdir src
touch src/styles.css

Öffnen Sie die Datei „styles.css“ und fügen Sie die folgenden Importe hinzu:

@tailwind base;
@tailwind components;
@tailwind utilities;

Diese Anweisungen weisen Tailwind an, seine Basis-, Komponenten- und Dienstprogrammstile in Ihre CSS-Datei aufzunehmen.

CSS erstellen und ansehen

Um Ihr CSS zu kompilieren, müssen Sie die Tailwind-CLI verwenden. Fügen Sie Ihrer package.json-Datei ein Build-Skript hinzu:

"scripts": {
  "build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
  "watch": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}

Das Build-Skript kompiliert Ihre src/styles.css-Datei und gibt das Ergebnis an dist/styles.css aus. Das Überwachungsskript macht dasselbe, sucht aber weiterhin nach Änderungen und kompiliert automatisch neu.

Um Ihr CSS zum ersten Mal zu kompilieren, führen Sie Folgendes aus:

npm run build

Dieser Befehl erstellt ein dist-Verzeichnis mit der kompilierten Datei „styles.css“.

Erstellen Sie Ihre erste HTML-Datei

Erstellen Sie nun eine index.html-Datei im src-Verzeichnis:

touch src/index.html

Öffnen Sie die Datei index.html und fügen Sie den folgenden HTML-Code hinzu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Project</title>
  <link href="../dist/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-4xl font-bold text-center mt-10">Hello, Tailwind CSS!</h1>
</body>
</html>

Diese einfache HTML-Datei enthält die kompilierte Tailwind-CSS-Datei und fügt eine gestaltete Überschrift hinzu.

Um Ihre Änderungen anzuzeigen, öffnen Sie die Datei index.html in einem Webbrowser.

Optimierung für die Produktion

Wenn Sie bereit sind, Ihr Projekt bereitzustellen, möchten Sie Ihr CSS für die Produktion optimieren. Tailwind bietet ein integriertes Tool zum Löschen ungenutzter Stile und zur Minimierung Ihres CSS.

To enable this, update your tailwind.config.js file to include the purge option:

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, install @fullhuman/postcss-purgecss and cssnano:

npm install @fullhuman/postcss-purgecss cssnano

Create a postcss.config.js file in your project root and add the following configuration:

const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    purgecss({
      content: ['./src/**/*.{html,js}'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
    cssnano({
      preset: 'default',
    }),
  ],
}

This configuration sets up PostCSS with PurgeCSS and CSSNano to remove unused styles and minify your CSS.

Finally, update your build script in package.json:

"scripts": {
  "build": "NODE_ENV=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}

Run the build script to generate your optimized CSS:

npm run build

Your dist/styles.css file is now optimized for production.

Conclusion

Setting up a Tailwind CSS project from scratch is straightforward and provides a powerful toolkit for building custom designs. By following this guide, you've learned how to install Tailwind CSS, configure it, and optimize it for production. Tailwind's utility-first approach streamlines the styling process, allowing you to focus on building your application.

Happy coding!

Das obige ist der detaillierte Inhalt vonEinrichten eines Tailwind-CSS-Projekts von Grund auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!