Gatsby Starter Tailwind CSS

Start your project quickly with this Tailwind CSS starter. This starter provides you with the basics to get up and running quickly with Tailwind CSS.

Tailwind CSS is a utility-first CSS framework for rapidly building custom designs.

This starter uses Tailwind CSS v1.4.1 and therefore includes built-in PurgeCSS support through Tailwind itself. The starter sets you up with the following:

• src/css/tailwind.css where Tailwind's base, components and utilities directives are injected
• tailwind.config.js where you can customise the Tailwind configuration
• prettier
• gatsby-plugin-postcss including autoprefixer
• gatsby-plugin-react-helmet
• gatsby-plugin-manifest

Demo site

The demo site can be found here

Get started

1. Create your Gatsby site

Use the Gatsby CLI (npm install -g gatsby-cli if you don't have it already) to create your Gatsby site with Gatsby Starter Tailwind CSS:

gatsby new my-project-name https://github.com/melanienolan/gatsby-starter-tailwind-css

2. Start developing

Navigate to your project folder and start the development server:

cd my-project-name
gatsby develop

Now you'll be all set to go ahead and create your Gatsby site with Tailwind CSS!