Configurer un projet CSS Tailwind à partir de zéro

Configurer un projet CSS Tailwind à partir de zéro

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.

Table des matières

1. Présentation du CSS Tailwind
2. Prérequis
3. Créer un nouveau projet
4. Installation de Tailwind CSS
5. Configuration du CSS Tailwind
6. Création de votre premier fichier CSS Tailwind
7. Construire et surveiller CSS
8. Optimisation pour la production
9. Conclusion

Introduction au CSS Tailwind

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.

Pourquoi utiliser Tailwind CSS ?

• Approche utilitaire d'abord : vous permet d'appliquer des styles directement dans votre code HTML, réduisant ainsi le besoin de CSS personnalisé.
• Personnalisation : Tailwind est hautement personnalisable, vous permettant de remplacer les paramètres par défaut et de créer votre système de conception unique.
• Conception réactive : Tailwind propose des utilitaires de conception réactive intégrés, facilitant la création de conceptions adaptées aux mobiles.
• Cohérence : garantit un style cohérent dans toute votre application.

Conditions préalables

Avant de commencer, assurez-vous que les éléments suivants sont installés :

• Node.js (v12 ou supérieure)
• npm (gestionnaire de packages de nœuds)

Vous pouvez télécharger et installer Node.js et npm depuis le site officiel.

Mise en place d'un nouveau projet

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.

Installation du CSS Tailwind

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.

Configuration du CSS 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.

Création de votre premier fichier CSS Tailwind

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.

Construire et surveiller 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é.

Création de votre premier fichier HTML

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.

Optimisation pour la production

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.

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!

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!