💄 Demo

✨ Motivation

// More Tailwind examples https://tailwindcss.com/components/

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 https://github.com/denvash/gatsby-tailwind-styled-components-storybook-starter
    cd my-tailwind-styled-starter/
    # Clone the repo
    git clone https://github.com/denvash/gatsby-tailwind-styled-components-storybook-starter.git
    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