Installation de Tailwind CSS4 (NPM)

Avant de commencer, assurez-vous d'avoir installé Node.js et npm. Vous pouvez vérifier s'ils sont installés en exécutant les commandes suivantes :

node -v
npm -v

Si votre système ne prend pas encore en charge Node.js et npm, vous pouvez consulter notreTutoriel Node.js。

En Chine, l'utilisation de npm peut être très lente. Vous pouvez utiliser l'outil en ligne de commande cnpm personnalisé par Taobao (avec prise en charge de la compression gzip) au lieu du npm par défaut :

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

De cette façon, vous pouvez utiliser la commande cnpm pour installer des modules :

$ cnpm install [name]

Pour plus d'informations, veuillez consulter :http://npm.taobao.org/。

Installer Tailwind CSS

Par rapport à Tailwind CSS 3, Tailwind CSS 4 détecte automatiquement les fichiers tels que HTML et JavaScript, vous évitant la corvée de configurer manuellement les sources de contenu.

Installation npm

La façon la plus simple et la plus rapide d'utiliser Tailwind CSS à partir de zéro est via l'outil Tailwind CLI.

Installer via npm : Installer et configurer Tailwind CSS dans votre projet local :

npm install tailwindcss @tailwindcss/cli

1. Importer Tailwind dans le CSS: Ajoutez ce qui suit à votre fichier CSS @import "tailwindcss";。

Par exemple, importez-le en haut du fichier src/input.css :

fichier src/input.css

@import "tailwindcss";

2. Démarrer le processus de build de Tailwind CLI: Exécutez l'outil CLI pour rechercher les classes dans vos fichiers source et générer votre CSS.

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

3. Commencez à utiliser Tailwind dans votre HTML: Ajoutez le fichier CSS compilé à votre <head>, et commencez à utiliser les classes utilitaires de Tailwind pour styliser votre contenu.

fichier src/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold">
    Bonjour le monde !
  </h1>
</body>
</html>

Installer en tant que plugin Vite

Vite est un outil de build front-end moderne conçu pour offrir une expérience de développement rapide en tirant parti de la prise en charge native des modules ES dans les navigateurs modernes.

Pour plus de détails sur Vite, veuillez consulter :Tutoriel Vite。

Installer Tailwind CSS en tant que plugin Vite est la façon la plus transparente de l'intégrer avec des frameworks tels que Laravel, SvelteKit, React Router, Nuxt et SolidJS.

1. Installer Tailwind CSS

Installez tailwindcss et @tailwindcss/vite via npm :

npm install tailwindcss @tailwindcss/vite

2. Configurer le plugin Vite

Dans le fichier de configuration Vitevite.config.tsajoutez le plugin @tailwindcss/vite :

fichier vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

3. Importer Tailwind CSS

Dans votre fichier CSS, ajoutez@importpour importer Tailwind CSS :

@import "tailwindcss";

4. Démarrer le processus de build

Exécutez le processus de build en utilisantnpm run devou d'autres commandes que vous avez configurées dans votre fichier package.json :

npm run dev

5. Commencer à utiliser Tailwind dans votre HTML

Assurez-vous que le CSS compilé est inclus dans votre <head> (le framework peut le gérer automatiquement), puis commencez à utiliser les classes utilitaires de Tailwind pour styliser votre contenu.

Exemple

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/src/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold">
    Bonjour le monde !
  </h1>
</body>
</html>

Installer en tant que plugin PostCSS

L'installation de Tailwind CSS en tant que plugin PostCSS vous permet de l'intégrer de manière transparente à des frameworks tels que Next.js et Angular.

1. Installer Tailwind CSS

Installez tailwindcss, @tailwindcss/postcss et postcss via npm.

npm install tailwindcss @tailwindcss/postcss postcss

2. Ajoutez Tailwind à votre configuration PostCSS

Dans le fichier postcss.config.mjs de votre projet (ou partout où PostCSS est configuré), ajoutez @tailwindcss/postcss.

fichier postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

3. Importer Tailwind CSS

Ajoutez un @import à votre fichier CSS pour importer Tailwind CSS.

@import "tailwindcss";

4. Démarrer le processus de build

Lancez le processus de build avec npm run dev ou d'autres commandes que vous avez configurées dans votre fichier package.json.

npm run dev

5. Commencer à utiliser Tailwind dans votre HTML

Assurez-vous que le CSS compilé est inclus dans votre <head> (le framework peut le gérer automatiquement), puis commencez à utiliser les classes utilitaires de Tailwind pour styliser votre contenu.

Exemple

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold">
    Bonjour le monde !
  </h1>
</body>
</html>
Autres extensions