Storybook-tailwind. How should I add tailwind to storybook

Question

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 https://tailwindcss.com/docs/guides/create-react-app 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 https://tailwindcss.com/docs/guides/create-react-app 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"   ] }  

Answer 1

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: {             ident: 'postcss',             plugins: [               require('tailwindcss'),               require('autoprefixer'),             ],           },         },       ],       include: path.resolve(__dirname, '../'),     })     return config   }, }