Intégrer Tailwind CSS à gatsby

Mis à jour le

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

npm i -D tailwindcss autoprefixer postcss

Créez le fichier de configuration tailwind :

// tailwind.config.js
module.exports = {
    purge: false,
    darkMode: 'class',
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

Créez le fichier de configuration postcss postcss.config.js :

// postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

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';

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;

©2017-2021