Heim > Artikel > Web-Frontend > 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.
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.
Bevor wir beginnen, stellen Sie sicher, dass Sie Folgendes installiert haben:
Sie können Node.js und npm von der offiziellen Website herunterladen und installieren.
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.
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.
Ö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.
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.
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 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.
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.
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!