Tailwind CSS est devenu un choix populaire parmi les développeurs pour son approche du style axée avant tout sur l'utilitaire. Il offre un moyen hautement personnalisable et efficace de concevoir des applications Web sans écrire de CSS personnalisé. Dans ce guide, nous vous guiderons dans la configuration d'un projet CSS Tailwind à partir de zéro.
Tailwind CSS est un framework CSS axé sur les utilitaires qui fournit des classes utilitaires de bas niveau pour créer des conceptions personnalisées directement dans votre balisage. Contrairement aux frameworks CSS traditionnels comme Bootstrap ou Foundation, Tailwind n'est pas livré avec des composants préconçus. Au lieu de cela, il fournit un ensemble de classes utilitaires qui vous permettent de concevoir vos composants sans quitter votre code HTML.
Avant de commencer, assurez-vous que les éléments suivants sont installés :
Vous pouvez télécharger et installer Node.js et npm depuis le site officiel.
Tout d'abord, créez un nouveau répertoire pour votre projet et accédez-y :
mkdir tailwind-project cd tailwind-project
Ensuite, initialisez un nouveau projet npm :
npm init -y
Cette commande crée un fichier package.json, qui gardera une trace des dépendances et des scripts de votre projet.
Pour installer Tailwind CSS, vous devez l'ajouter en tant que dépendance à votre projet. Exécutez la commande suivante :
npm install tailwindcss
Après avoir installé Tailwind CSS, vous devrez créer un fichier de configuration. Ce fichier vous permettra de personnaliser les paramètres par défaut de Tailwind CSS. Pour générer ce fichier, exécutez :
npx tailwindcss init
Cette commande crée un fichier tailwind.config.js à la racine de votre projet. Ce fichier vous permet de personnaliser votre configuration Tailwind.
Ouvrez le fichier tailwind.config.js. Vous devriez voir une configuration de base comme celle-ci :
module.exports = { content: [], theme: { extend: {}, }, plugins: [], }
Le tableau de contenu est utilisé pour spécifier les chemins d'accès à tous vos fichiers modèles. Cela permet à Tailwind de secouer les styles inutilisés en production. Ajoutez les chemins d'accès à vos fichiers HTML et JavaScript :
module.exports = { content: [ './src/**/*.{html,js}', ], theme: { extend: {}, }, plugins: [], }
Cette configuration indique à Tailwind de rechercher des classes dans n'importe quel fichier .html ou .js dans le répertoire src.
Ensuite, créez un nouveau fichier CSS dans lequel vous importerez les styles de base, de composants et d'utilitaires de Tailwind. Créez un répertoire src et à l'intérieur, créez un fichier nommé styles.css :
mkdir src touch src/styles.css
Ouvrez le fichier styles.css et ajoutez les importations suivantes :
@tailwind base; @tailwind components; @tailwind utilities;
Ces directives indiquent à Tailwind d'inclure ses styles de base, de composants et d'utilitaires dans votre fichier CSS.
Pour compiler votre CSS, vous devrez utiliser la CLI Tailwind. Ajoutez un script de build à votre fichier package.json :
"scripts": { "build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css", "watch": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch" }
Le script de construction compile votre fichier src/styles.css et affiche le résultat dans dist/styles.css. Le script de surveillance fait de même mais continue de surveiller les changements et se recompile automatiquement.
Pour compiler votre CSS pour la première fois, exécutez :
npm run build
Cette commande crée un répertoire dist avec le fichier styles.css compilé.
Maintenant, créez un fichier index.html dans le répertoire src :
touch src/index.html
Ouvrez le fichier index.html et ajoutez le code HTML suivant :
<!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>
Ce fichier HTML simple inclut le fichier CSS Tailwind compilé et ajoute un en-tête stylisé.
Pour voir vos modifications, ouvrez le fichier index.html dans un navigateur Web.
Lorsque vous serez prêt à déployer votre projet, vous souhaiterez optimiser votre CSS pour la production. Tailwind fournit un outil intégré pour purger les styles inutilisés et réduire votre 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!
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!