Gatsby Tailwind Theme
A Gatsby theme to use tailwindcss.
Summary
This theme installs:
Tailwindcss and postcss are required to have tailwind properly working, emotion is installed because it is very common to use a CSS in JS framework and I think it is useful to have emotion and tailwind installed and configured to work together.
Installation
Manually add to your site
npm install --save @renejam/gatsby-theme-tailwindcss
or
yarn add @renejam/gatsby-theme-tailwindcss
Usage
Add Tailwind to your CSS
As stated on its official documentation, inject Tailwind's styles using the @tailwind
directive:
@tailwind base;
@tailwind components;
@tailwind utilities;
You should write these 3 directives either on a css you are importing or creating a new .css
file and importing it.
I recommend creating a globals.css
file for example in a utils
folder and use it for tailwind loading directives and later extracting CSS components and / or other customisations if needed.
├── gatsby-config.js
├── node_modules
├── package.json
└── src
├── pages
│ └── index.js
└── utils
└── globals.css
NOTE: If you experience a FOUC (flash of unstyled content) when first loading pages, import the above mentioned .css
file on gatsby-browser.js
, like this:
//gatsby-browser.js
import "./src/utils/globals.css"
Configuration
Add a tailwind.config.js
file at the root of your project folder
yarn tailwind init
or
npx tailwindcss init
Theme options
This theme is using gatsby-plugin-postcss under the hood, so you can pass in any options you would to the actual postcss plugin (postCssPlugins and cssLoaderOptions)
NOTE: using a postcss.config.js file is not supported, you have to use the options: {} object of the theme.
Key | Default value | Description |
---|---|---|
postCssPlugins |
[require("tailwindcss")] | postcss-plugins to load |
cssLoaderOptions |
{} | postcss css loader options |
emotionOptions |
{} | emotion babel-plugin-emotion options |
Example usage
The only plugin included as default is the actual tailwindcss required to work, but I do recommend using the autoprefixer plugin.
With autoprefixer
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-theme-tailwindcss`,
options: {
postCssPlugins: [require("autoprefixer")],
},
},
],
}