Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. This guide will show you how to get started with Gatsby and Tailwind CSS.

Installing and configuring Tailwind

Please follow the official “Install Tailwind CSS with Gatsby” guide to install and configure Tailwind CSS with Gatsby. Some important notes when configuring Tailwind with Gatsby:

• It is not recommended that you include Gatsby’s output directories (public and .cache) in your content array in your tailwind.config.js. You should only include your source files to have Tailwind working as expected.
• If you use GraphQL Typegen a file at src/gatsby-types.d.ts will be generated and with the default configuration for content in tailwind.config.js this will trigger an infinite loop. You have two options to fix this:
  1. Configure GraphQL Typegen’s typesOutputPath option to generate the file in another place
  2. Adapt the content array to not include the src/gatsby-types.d.ts file, for example:

Other resources

• Tailwind Documentation
• Using Tailwind with CSS-in-JS