- 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.
-
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
-
Start Develop
yarn develop yarn storybook
You must run develop once before storybook.
Storybook must have access to
public
folder. -
Deploy