Create your project
Start by creating a new Gatsby project if you don’t have one set up already. The most common approach is to use Gatsby CLI.
Terminalgatsby new my-projectcd my-project
Install Tailwind CSS
Using npm, install
tailwindcss
and its peer dependencies, as well asgatsby-plugin-postcss
, and then run the init command to generate bothtailwind.config.js
andpostcss.config.js
.Terminalnpm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcssnpx tailwindcss init -p
Enable the Gatsby PostCSS plugin
In your
gatsby-config.js
file, enable thegatsby-plugin-postcss
. See the plugin's documentation for more information.gatsby-config.jsmodule.exports = { plugins: [ 'gatsby-plugin-postcss', // ... ], }
Configure your template paths
Add the paths to all of your template files in your
tailwind.config.js
file.tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/pages/**/*.{js,jsx,ts,tsx}", "./src/components/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], }
Add the Tailwind directives to your CSS
Create a
./src/styles/global.css
file and add the@tailwind
directives for each of Tailwind’s layers.global.css@tailwind base; @tailwind components; @tailwind utilities;
Import the CSS file
Create a
gatsby-browser.js
file at the root of your project if it doesn’t already exist, and import your newly-created./src/styles/global.css
file.gatsby-browser.jsimport './src/styles/global.css'
- Terminal
gatsby develop
- index.js
export default function IndexPage() { return ( <Layout> <h1 className="text-3xl font-bold underline"> Hello world! </h1> </Layout> ) }