Add the latest Tailwind CSS to a Gridsome project.
npm install gridsome-plugin-tailwindcss2This plugin will add latest version of Tailwind (currently v3) to your
Gridsome project.
This plugin lets you use the full power of the latest TailwindCSS (~~with JIT mode and all the good stuff~~ It seems that the compatibility build now also supports JIT and is identical to the PostCSS 8 build). The other plugin relies on TailwindCSS PostCSS7 compatibility build.
yarn add -D gridsome-plugin-tailwindcss2 tailwindcss@latest postcss@latest autoprefixer@latest
Have a main CSS file with the following:
``postcss`
@tailwind base;
@tailwind components;
@tailwind utilities;
// rest of the file
If you need to create tailwind.config.js, run ./node_modules/.bin/tailwind init to create one.
Set any options you want to set in gridsome.config.js.
`javascript``
module.exports = {
plugins: [
{
use: "gridsome-plugin-tailwindcss2",
options: {
tailwindConfigFile: './tailwind.config.js',
mainCssFile: './src/assets/css/main.css',
}
},
// ...
],
};