https://github.com/wagerfield/storybook-tailwind

Storybook with Tailwind 2 JIT and PostCSS 8
https://github.com/wagerfield/storybook-tailwind

jit storybook tailwind

Last synced: about 2 months ago
JSON representation

Storybook with Tailwind 2 JIT and PostCSS 8

• Host: GitHub
• URL: https://github.com/wagerfield/storybook-tailwind
• Owner: wagerfield
• Created: 2021-03-16T12:18:10.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-06-03T15:21:49.000Z (over 3 years ago)
• Last Synced: 2024-07-30T20:43:53.303Z (5 months ago)
• Topics: jit, storybook, tailwind
• Language: JavaScript
• Homepage:
• Size: 186 KB
• Stars: 19
• Watchers: 3
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Storybook + Tailwind 2 + PostCSS 8

Tailwind 2 uses PostCSS 8 by default.

Storybook uses PostCSS 7 by default.

In order to get Storybook to work with Tailwind you have 2 options:

1. Use Tailwind's `@tailwindcss/postcss7-compat` package following the [steps outlined here](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build).

2. Use Storybook's `@storybook/addon-postcss` package following the [steps outlined here](https://storybook.js.org/addons/@storybook/addon-postcss).

This repo demonstrates **option 2** with the new [Tailwind JIT Compiler](https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css) that got released on Monday 15th March. If you want to use the standard compiler, replace "@tailwindcss/jit" in `postcss.config.js` with "tailwindcss".

```js

// Tailwind JIT Compiler Config

module.exports = {

  plugins: {

    "@tailwindcss/jit": {},

    "autoprefixer": {},

  },

}

// Standard Tailwind Config

module.exports = {

  plugins: {

    tailwindcss: {},

    autoprefixer: {},

  },

}

```