Gridsome et Tailwind CSS sans plugin !

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

Installation de tailwindcss et de purgecss

yarn add tailwindcss @fullhuman/postcss-purgecss -D

Puis ajouter le fichier de configuration:

npx tailwind init

Ce qui doit donner le fichier suivant:

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

@tailwind base;

@tailwind components;

@tailwind utilities;

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

import "./styles/";

Configurer purgecss

A la racine du projet, créer un fichier 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:

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:

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

Enjoy !