The easy way to add Tailwind CSS to Gatsby
11
There are several ways of adding Tailwind CSS to Gatsby, and a lot of them are too complex or adding unnecessary code. Tailwind CSS can be addded with PostCSS in a simple way.
Create two configs for Tailwind CSS
and PostCSS
.
touch tailwind.config.js
touch postcss.config.js
Copy basic theme styling to tailwind.config.js. This can be adjusted to your needs, refer to the official docs.
const colors = require('tailwindcss/colors');
module.exports = {
theme: {
colors: {
gray: colors.coolGray,
blue: colors.lightBlue,
red: colors.rose,
pink: colors.fuchsia,
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
},
},
},
variants: {
extend: {
borderColor: ['focus-visible'],
opacity: ['disabled'],
},
},
};
postcss.config.js:
module.exports = () => ({
plugins: [require('tailwindcss')],
});
npm install --save gatsby-plugin-postcss tailwindcss
๐ฐ: Start your cloud journey with $100 in free credits with DigitalOcean!
To get PostCSS to trigger properly in the build process, you have to add the gatsby-plugin-postcss
to your Gatsby config.
gatbsy-config.js
module.exports = {
"plugins": [
// All other plugins
`gatsby-plugin-postcss`
]
})
The last step is to import Tailwind CSS in the gatsby-browser.js
.
import 'tailwindcss/base.css';
import 'tailwindcss/components.css';
import 'tailwindcss/utilities.css';
๐๐๐ Congratulations! ๐๐๐ You have successfully added TailwindCSS to your website and can simply add Tailwind classes to your HTML.
Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut. If you want to know more about Gatsby, have a look at these Gatsby Tutorials.
References (and Big thanks):
Find this post useful?
3 min read
Three easy steps to add website tracking to your website
Read More
3 min read
Three easy steps to add website tracking to your website
Read More
3 min read
Composing custom useStaticQuery hooks
Read More