denvash / gatsby-tailwind-styled-components-storybook-starter

Tailwind CSS + Styled-Components + Storybook starter for Gatsby

💄 Demo

• Site
• Storybook

✨ Motivation

• Use Tailwind CSS v1 in Styled-Components.
• Decouple developing with Storybook.
• Use PostCSS to extend Tailwind's CSS.
• PurgeCSS out-of-the box.
• PostCSS-Preset-Env out-of-the box.

// 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

   • Deploy Gatsby App
   • Deploy Storybook