Intégrer Tailwind CSS à gatsby

Mis à jour le dimanche 26 décembre 2021 par johackim

Pour intégrer Tailwind CSS dans Gatsby, installez les packages npm suivants :

npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss

1. Configurer Tailwind & Postcss

Créez les fichiers de configuration tailwind.config.js, postcss.config.js et gatsby-config.js :

// tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
// gatsby-config.js
module.exports = {
plugins: ['gatsby-plugin-postcss'],
}

2. Créer un fichier style.css

Puis créez un fichier style.css à intégrer dans le fichier gatsby-browser.js :

/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
// gatsby-browser.js
import './src/style.css';

3. Utiliser Tailwind CSS dans votre code

Vous pouvez à présent utiliser Tailwind CSS partout dans votre code 😀 :

// src/pages/index.js
import React from 'react';
const IndexPage = () => (
<p className="text-red-800">Hello world!</p>
);
export default IndexPage;

Références :