Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.


SiteBuild StorybookBuild

💄 Demo


// More Tailwind examples

import tw from 'tailwind.macro';

// Standalone Tailwind Classes
const Main = tw.div`
  p-6 bg-gray-100 rounded-lg shadow-2xl

// Keep the power of styled-components
const Wrapper = styled.div`
  ${tw`flex items-center justify-center flex-col h-screen`}
  color: ${({ isClicked }) => (isClicked ? 'red' : 'blue')}

// Develop and test with storybook v5
import React from 'react';
import IndexPage from './IndexPage.react';

export default {
  title: 'IndexPage',

export const Default = () => <IndexPage />;

📦 What's this template solves?

  • Configure Tailwind to work with CSS-in-JS & PostCSS.
  • Configure Gatsby & Tailwind to work with Storybook.
  • Usage Examples (IndexPage component).
  • Deploy ready, either for Storybook.

🚀 Quick start

  1. Get the repo with Gatsby CLI or clone from Github

    # Create a new Gatsby site using the Gatsby CLI
    gatsby new my-tailwind-styled-starter
    cd my-tailwind-styled-starter/
    # Clone the repo
    git clone
    cd gatsby-styled-tailwind-storybook-starter
    yarn install
  2. Start Develop

    yarn develop
    yarn storybook

    You must run develop once before storybook.

    Storybook must have access to public folder.

  3. Deploy

You can’t perform that action at this time.