See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
Community Plugin
View plugin on GitHub

Tailwind CSS + Styled Components + PurgeCSS

This theme installs Tailwind CSS + PostCSS + Autoprefixer + Styled Components (with twin macro) and PurgeCSS for deleting unused Tailwind CSS code.


Add Tailwind CSS’s directives

As stated in the Tailwind documentation, you should create a css file with the base tailwind directives.

Create a site.css file with the following directives and include it in your project. In this example, I will use the root folder.

@tailwind base;

@tailwind components;

@tailwind utilities;
├── gatsby-config.js
├── node_modules
├── package.json
├── site.css
Include them in gatsby-browser.js

In your gatsby-browser.js, import your css directives

import './site.css';

Add Tailwind CSS Config File

Create tailwind.config.js at the root folder in order to start using twin.macro and also customize tailwindcss.

npx tailwindcss init


yarn tailwind init

Add twin.macro config

Create a babel-plugin-macros.config.js in order to use twin.macro with styled-components

module.exports = {
  twin: {
    styled: 'styled-components',

Example Usage

import React from 'react';
import styled from 'styled-components';
import tw from 'twin.macro';

const Container = styled.div.attrs({
  className: 'py-8 bg-purple-800',
  .heading {
    ${tw`text-white px-5 text-2xl`}

export default () => (
    <p className="heading">Homepage in a user site</p>
© 2022 Gatsby, Inc.