Gatsby Book Launch

“The missing guide to the modern web” launches on Thursday, Sep 29th: Modular: The Web’s New Architecture

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Tailwind CSS + Styled Components + PurgeCSS

This theme installs Tailwind CSS + PostCSS + PurgeCSS + Styled Components (with twin macro).


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: {
    preset: 'styled-components',

Example Usage

import React, { useState } from 'react';
import tw, { styled } from 'twin.macro';

const Container = styled.div`
  ${({ isLight }) => (isLight ? tw`py-2` : tw`py-2 bg-black`)}
  .heading {
    ${({ isLight }) => (isLight ? tw`text-black` : tw`text-white`)}
  button {
    ${tw`mt-2 p-2 rounded-lg font-bold`}
    ${({ isLight }) => (isLight ? tw`bg-black text-white` : tw`bg-white`)}

export default () => {
  const [isLight, setLight] = useState(true);
  return (
    <Container isLight={isLight}>
      <p className="heading">Homepage in a users site</p>
      <button onClick={() => setLight(!isLight)}>Toggle color</button>
© 2022 Gatsby, Inc.