Gatsby's Tailwind SASS Starter

Gatsby's Tailwind SASS Starter is a boilerplate for the Gatsby static site generator that gives you a preconfigured project with Tailwind CSS and SASS styling out of the box. This starter, from durianstack, includes the standard Gatsby configuration files and a visual demo you can inspect before installing.

What is Gatsby's Tailwind SASS Starter?

This is a starter repository for Gatsby, the React-based site generator, tailored for developers who want to build with Tailwind CSS and SASS. It takes a bare Gatsby installation and adds a tailwind.js config file where you define your design tokens, plus SASS preprocessing so you can use variables, mixins, and nesting. The project is hosted on GitHub under the durianstack account, and a live demo is deployed at https://gatsby-tailwindcss-sass-starter-demo.netlify.com/.

Key Features

• Tailwind CSS configuration — An editable tailwind.js file that controls your color palette, font stacks, type scale, border sizes, breakpoints, and opacity scale.
• SASS support — The starter is set up for SASS, so you can write styles with variables, mixins, and nested rules alongside utility classes.
• Gatsby config files — Includes gatsby-config.js for site metadata and plugins, gatsby-node.js for Node API usage, gatsby-browser.js for browser APIs, and gatsby-ssr.js for server-side rendering customization.
• Prettier formatting — Ships with a .prettierrc to keep code style consistent across contributors.
• Quick start via Gatsby CLI — Create a new site with one command: npx gatsby new your-site-name https://github.com/durianstack/gatsby-tailwindcss-sass-starter.
• Live development and GraphiQL — After running gatsby develop, the site runs at localhost:8000 and the GraphiQL data explorer is available at localhost:8000/___graphql.
• One-click Netlify deployment — The README includes a Deploy to Netlify button that connects the repo for automatic hosting.

Who is it for?

• Gatsby developers who want a preconfigured Tailwind plus SASS setup so they can skip the build configuration and start coding.
• Front-end designers who want to use Tailwind's config file as an executable style guide while still using SASS for maintainable stylesheets.
• Static site builders who need a fast, modern boilerplate with React and utility-first CSS for marketing pages, blogs, or portfolios.

What can you do with this starter?

• Scaffold a new site: Use the Gatsby CLI command or the Deploy to Netlify button to get a copy of the project running.
• Customize the design system: Edit tailwind.js to change colors, fonts, type scale, borders, and breakpoints site-wide.
• Edit pages live: Open src/pages/index.js and save — the browser updates in real time via Gatsby's hot reloading.

How does it work?

1. Run npx gatsby new your-site-name https://github.com/durianstack/gatsby-tailwindcss-sass-starter.
2. Navigate into the new directory and start development with gatsby develop.
3. Edit the source in src/pages/index.js and see changes instantly in the browser at localhost:8000.

Pricing

The starter is open source under the MIT license — the README states Gatsby is MIT licensed and the project includes a LICENSE file.

FAQ

Is the starter free to use?

Yes, the project is MIT licensed, so you can use, modify, and distribute it freely.

What does the template include?

It includes the standard Gatsby files: gatsby-config.js, gatsby-node.js, gatsby-browser.js, gatsby-ssr.js, plus a tailwind.js config, .prettierrc, and a src directory.

How do I deploy it to Netlify?

The README has a one-click Deploy to Netlify button that sets up the repository directly on Netlify; there is also a live demo hosted on Netlify.

Does this starter support SASS?

Yes, it is a Tailwind and SASS starter, so both are preconfigured.