Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.

README.md

banner

SiteBuild StorybookBuild

💄 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

You can’t perform that action at this time.