Currently, installing tailwind (without specific versions) will not easily work with Gridsome, because of incompatibilities with Postcss 8.
You may get errors when running gridsome develop
such as true is not a PostCSS plugin
. This is likely due to PostCSS 8.
Here is how I got around these issues...
Add these dev dependencies to package.json
:
"@tailwindcss/postcss7-compat": "^2.0.2",
"autoprefixer": "^9",
"gridsome-plugin-tailwindcss": "^4.1.1",
"postcss": "^7",
"tailwindcss": "npm:@tailwindcss/postcss7-compat"
(and run yarn
to install them)
Then in gridsome.config.js
:
// import tailwind at the top of the file
const tailwindcss = require("tailwindcss");
module.exports = {
// ... (the rest of your config)
css: {
loaderOptions: {
postcss: {
plugins: [
tailwindcss
],
},
},
},
plugins: [
{
use: "gridsome-plugin-tailwindcss",
// these options are optional, as they are copies of the default values...
options: {
tailwindConfig: './tailwind.config.js',
presetEnvConfig: {},
shouldImport: false,
shouldTimeTravel: false
}
},
// ... the rest of your plugins
],
}
And lastly create a tailwind.config.js
:
module.exports = {
purge: [
'./src/**/*.vue',
'./src/**/*.js',
'./src/**/*.md',
'./src/**/*.html',
],
theme: {
// your tailwind config goes here
// container: {
// center: true,
// },
},
}
And it should work! You can try it out by adding this in a vue component:
<p class="text-2xl mb-2 text-black text-center">Example of tailwind</p>
Or in your index.js
add
require('./app.css');
And in app.css
add some tailwind such as:
@tailwind base;
@tailwind tailwind;
@tailwind components;
body { background : bg-red text-blue; }
Probably by the time you read this the issues are resolved. The exact version of Gridsome that I used this with was 0.7.23.
(The config above will auto prune unused Tailwind css rules, to keep your css file size down.)
Comments →How to set up Tailwind CSS with gridsome