Dans cet article, nous allons juste aborder l'installation et la configuration de tailwindcss dans un projet Gridsome.

Installation de tailwindcss et de purgecss

shell
yarn add tailwindcss @fullhuman/postcss-purgecss -D

Puis ajouter le fichier de configuration:

shell
npx tailwind init

Ce qui doit donner le fichier suivant:

tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: []
}

Importer tailwindcss

Le mieux est de créer un dossier styledans ./src/assets/ puis de créer un fichier index.css

./src/assets/index.css
@tailwind base;

@tailwind components;

@tailwind utilities;

Maintenant il faut importer tout ça dans le fichier main.js

./src/main.js
import "./styles/";

Configurer purgecss

A la racine du projet, créer un fichier purgecss.config.js

purgecss.config.js
class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-z0-9-:\\/]+/g)
  }
}

module.exports = {
  content: [
    './src/**/*.vue',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.html',
    './src/**/*.pug',
    './src/**/*.md',
    './docs/**/*.md',
    './blog/**/*.md',
  ],
  whitelist: [
    'body',
    'html',
    'img',
    'a',
    'g-image',
    'g-image--lazy',
    'g-image--loaded',
    'active',
  ],
  extractors: [
    {
      extractor: TailwindExtractor,
      extensions: ['vue', 'js', 'jsx', 'md', 'html', 'pug'],
    },
  ],
}

Ensuite, au début du fichier gridsome.config.js , ajouter:

gridsome.config.js
const tailwind = require('tailwindcss')const purgecss = require('@fullhuman/postcss-purgecss')const postcssPlugins = [  tailwind(),]if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss())

module.exports = {
  ...

Puis à la fin de ce même fichier:

gridsome.config.js
module.exports = {
  ...
  css: {    loaderOptions: {      postcss: {        plugins: postcssPlugins,      },    },  },}

Enjoy !