logo
Johackim
Hacker indépendant

Intégrer Tailwind CSS à gatsby

Mis à jour le lundi 7 juin 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 :