I want to add tailwind to storybook. So that Stories will render just like it will render on web.
I used create-react-app project-name --template typescript to create the project.
Then to install the tailwind I followed this instruction from the documentation of tailwind.
Once I finished it I ran the code npm sb init. Which made sure that storybook ran.
Now I need to tell storybook to use tailwindcss for styling. But I have no idea how.
Every other answer I saw tells to edit postcss.config.js files.
But I followed this documentation where I didnt even have to create postcss.config.js file. So I am confused to what to do now.
For clarity I will include some configuration file below.
craco.config.js
module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, } .storybook/preview.js
import "../src/index.css" export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, } .storybook/main.js
module.exports = { "stories": [ "../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-create-react-app" ] } src/index.css
@tailwind base; @tailwind components; @tailwind utilities; tailwind.config.js
module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } package.json
`{ "name": "memory", "version": "0.1.0", "private": true, "dependencies": { "@craco/craco": "^6.0.0", "@tailwindcss/postcss7-compat": "^2.0.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.8", "autoprefixer": "^9.8.6", "postcss": "^7.0.35", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.1", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2", "typescript": "^4.0.3", "web-vitals": "^0.2.4" }, "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject", "storybook": "start-storybook -p 6006 -s public", "build-storybook": "build-storybook -s public" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@storybook/addon-actions": "^6.1.11", "@storybook/addon-essentials": "^6.1.11", "@storybook/addon-links": "^6.1.11", "@storybook/node-logger": "^6.1.11", "@storybook/preset-create-react-app": "^3.1.5", "@storybook/react": "^6.1.11" } } tsconfig.json
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" ] } 4 Answers
You're almost there.
The missing piece of your config is to add a webpack configuration to apply tailwind to postcss-loader:
const path = require('path') module.exports = { stories: [ '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)' ], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app', ], webpackFinal: async (config) => { config.module.rules.push({ test: /\.css$/, use: [ { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, }, ], include: path.resolve(__dirname, '../'), }) return config }, } Storybook recommends using the @storybook/addon-postcss for customizing the postCSS config from now on (instead of relying on customizing the postcss-loader):
Add the postCSS addon to your installation
npm i -D @storybook/addon-postcss # or yarn add -D @storybook/addon-postcssCreate the
postcss.config.jsin the project root// postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } }Add the plugin to your
.storybook/main.js// .storybook/main.js module.exports = { ... addons: [ ... { name: '@storybook/addon-postcss', options: { cssLoaderOptions: { // When you have splitted your css over multiple files // and use @import('./other-styles.css') importLoaders: 1, }, postcssLoaderOptions: { // When using postCSS 8 implementation: require('postcss'), }, }, }, ], };Import your css file in the
.storybook/preview.js// .storybook/preview.js import '../src/styles.css';
The answer was right but in the latest CRA I have to config like this:
config.module.rules.push({ test: /\.css$/, use: [ { loader: "postcss-loader", options: { // HERE: OPTIONS postcssOptions: { plugins: [require("tailwindcss"), require("autoprefixer")], }, }, }, ], include: path.resolve(__dirname, "../"), }); Similar to ofhouse's answer, but here is a solution if you don't want to have an extra postcss.config.js for only a few lines or if you want use typescript in everything (as the loader doesn't pick up postcss.config.ts)
- Add the official postCSS addon
npm i -D @storybook/addon-postcss yarn add -D @storybook/addon-postcss - Config main.ts & tailwind.config.ts
/* .stories/main.ts */ import postcss from 'postcss'; import * as tailwindcss from '../tailwind.config'; import type { StorybookConfig } from '@storybook/react/types'; export const addons: StorybookConfig['addons'] = [ // other addons, { name: '@storybook/addon-postcss', options: { postcssLoaderOptions: { implementation: postcss, postcssOptions: { plugins: { tailwindcss, // or you can nest your options entirely here autoprefixer: { // autoprefixer options }, }, }, }, }, }, ]; /* tailwind.config.ts */ import type { TailwindConfig } from 'tailwindcss/tailwind-config'; export const theme: TailwindConfig['theme'] = { // theme options } // other options 
