After following a react formation, I've decided to make a Gatsby website using Contentful content, and for CSS, I've used bootstrap to help me get something good, also helped with framer-motion for animation.
But now, I want some change and add Tailwind for sure !!
Let's follow the steps to start your journey with tailwindcss. π
- Install Tailwind
- install gatsby-plugin-postcss
- Custom CSS
- Purging your CSS
1) Install Tailwindcss
In your terminal in your Gatsby project, install Tailwind :
# Using NPM
npm install tailwindcss --save-dev
# Using Yarn
yarn add tailwindcss --dev
2) Generate a tailwind config file
In your terminal, still in your gatsby project, just run the following :
npx tailwindcss init
You will have a new tailwind.config.js file.
3) Install the plugin gatsby-plugin-postcss
You will need also to install the Gatsby PostCSS plugin gatsby-plugin-postcss.
Tailwind is built on PostCSS, that's why weed the plugin.
To install the plugin, just run the following in your terminal :
# Using NPM
npm install --save gatsby-plugin-postcss
# Using Yarn
yarn add gatsby-plugin-postcss
4) Include the plugin in your gatsby-config.js
We need to configure Gatsby, hence in your gatsby-config.js, just add the plugin as below (see my example):
module.exports = {
siteMetadata: {
title: `Dreaminh, illustrations, aquarelles & letterings`,
siteUrl: `https://www.dreaminh.com`,
...
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-offline`,
`gatsby-plugin-netlify`,
...
`gatsby-plugin-postcss`,
]
};
5) Configure PostCSS to use Tailwind
- To configure PostCSS, you need to create an empty
postcss.config.js
file in your project's root. - Add the following content
const tailwind = require('tailwindcss')
module.exports = () => ({
plugins: [tailwind('./tailwind.config.js'),require("autoprefixer")],
})
6) Add CSS File with tailwind directives
We are getting close, we just need to add our tailwind directives in our css.
Best practise is to create a global.css file such as src/styles/global.css and add the following :
@tailwind base;
@tailwind components;
@tailwind utilities;
7) Use of Tailwind
To finalize the installation, we need to import Tailwind in gatsby-browser.js
import "./src/styles/global.css"
π And that's it! You should now begin to play with Tailwindcss, as basic configuration is done.
I hope you will accomplish great things with this framework, obviously to go further don't hesitate to check on the official document, especially to build your custom theme. [talwindcss documentation]
Tailwind toolbox
Please find the library which can be helpful :
https://tailwindcomponents.com/
https://mertjf.github.io/tailblocks/
You can find me on:
- Instagram:Β https://instagram.com/regisnut
- Twitter:Β https://twitter.com/regisnut
- Portfolio:Β https://regiscode.netlify.app/
- GitHub:Β https://github.com/regisnut
Top comments (2)
Add sume purgecss postcss to lighten the whole css foles ;)
indeed, since version 1.4.0 you can add in tailwind.config.JS
I didn't try the plugin
gatsby-plugin-purgecss
, it has to be added in gatsby-config after postcss, and with tailwind: true: