Comments (12)
After many days of trial and error, I managed to get this to work.
The most important thing to understand is that the building process of a CRA application with TailwindCSS set up according to the documentation differs from the building process of Storybook. Therefore, one should bend over backwards to bypass the building process of the main project and accommodate for what Storybook expects. Here comes my configuration that uses the latest and greatest from React, Webpack, PostCSS, Tailwind and Storybook in terms of NPM packets versions.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
// tailwind.config.js
module.exports = {
// mode: 'jit', <--- Don't activate 'JIT' mode. Storybook is not playing well with it.
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], // <--- Make sure you use the latest convention. Not the 'prune' one.
...
plugins: [require('@tailwindcss/forms')], // <---- Don't put Tailwind related plugins elsewhere but in this file. Notice that 'require('tailwindcss'), require('autoprefixer')' are not included in this array.
};
// package.json
{
"devDependencies": {
...
"autoprefixer": "^10.4.7",
...
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.5.9",
"@storybook/manager-webpack5": "^6.5.9",
"@storybook/node-logger": "^6.5.9",
"@storybook/preset-create-react-app": "4.1.2",
"@storybook/react": "^6.5.9",
...
"postcss": "^8.4.14", <--- Important if you want to use latest and greatest like I do.
"postcss-loader": "^7.0.0", <--- Important to have a recent version as the version that comes bundled with other packages will be too old for the modern postcss package.
...
"tailwindcss": "^3.1.4",
...
"webpack": "5.73.0"
}
}
// .storybook/main.js
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
stories: [
path.resolve(__dirname, '../src/**/*.stories.mdx'),
path.resolve(__dirname, '../src/**/*.stories.@(js|jsx|ts|tsx)'),
],
/** Expose public folder to storybook as static */
staticDirs: [path.resolve(__dirname, '../public')],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/preset-create-react-app',
//{ <--- Notice how I'm bypassing @storybook/addon-postcss.
// I'm commenting it out as I'm waiting for this thing to catch up and work properly with normal Tailwind project setup as described in their documentation.
// name: '@storybook/addon-postcss',
// options: {
// cssLoaderOptions: {
// // When you have splitted your css over multiple files
// // and use @import('./other-styles.css')
// importLoaders: 1,
// },
// postcssLoaderOptions: {
// implementation: require('postcss'),
// },
// },
//},
],
framework: '@storybook/react',
core: {
builder: 'webpack5',
},
// <--- This is the important bit. It's where I use a different postprocessing method using the latest version of 'postcss-loader'.
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
},
],
include: path.resolve(__dirname, '../'),
});
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({
extensions: config.resolve.extensions,
}),
];
return config;
},
};
// .storybook/preview.js
// <--- The following two lines are critical too. You should make sure you don't process an already processed CSS once more or else you'll get the 'unknown word var' error.
import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
import 'tailwindcss/tailwind.css';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
And that's it, folks!
Normally, such configuration should allow you to use the latest and greatest of NPM packages and make React, TailwindCSS and Storybook coexist in harmony until '@storybook/addon-postcss' catches on.
Let me know if this doesn't cut the mustard.
from addon-postcss.
Basically in tailwind.config.js
you must specify the content
option like this:
const path = require('path')
module.exports = {
content: [path.join(__dirname, './src/**/*.{js,jsx,ts,tsx}')],
theme: {
extend: {},
},
plugins: [],
}
from addon-postcss.
No luck. I got rid of storybook and created a simple /components
route to view my components.
Note that this plugin has pretty been abandoned and the storybook team has other priorities. So the chances of all the issues in this repo getting fixed is pretty low. So use best judgment.
from addon-postcss.
FWIW I've moved all my components to use Ladle (by Uber team).
from addon-postcss.
This did not work for me. I no longer see errors but I don't see the styles in my components.
from addon-postcss.
if you're using postcss 8+ , add @storybook/addon-styling
and then update your storybook config as shown below
// .storybook/main.js
const config = {
...
addons: [
...
{
name: '@storybook/addon-styling',
options: {
implementation: require("postcss"), // <---- this is specifically for postcss 8
},
},
],
...
}
from addon-postcss.
I still get the same error, though I changed the content
from addon-postcss.
@sshquack any luck with this issue?
from addon-postcss.
Thanks. That helps!
from addon-postcss.
Solution: tailwindlabs/tailwindcss#6314 (comment)
FYI: @sshquack
from addon-postcss.
@alissaVrk I created a new project to test, and in fact, the change in content
is not necessary. I only added the CSS file in .storybook/preview.js
You can see here: https://github.com/carloschneider/storybook-tailwind
from addon-postcss.
Thanks malikalimoekhamedov
import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css'; import 'tailwindcss/tailwind.css'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, };
This work for me
from addon-postcss.
Related Issues (20)
- Add plugin array syntax to the example
- [Bug] `unknown word` error with tailwindcss HOT 7
- [Bug] [PostCSS 8] Tailwind apply not working in imported css files HOT 15
- [Bug] Angular 11.2.13 and Tailwind 2.1.2 works with start-storybook but not with build-storybook
- [Bug] Loader won't work for files with an extension other than ".css" (such as ".pcss" or ".postcss") HOT 8
- Vulnerability on @storybook/addon-postcss via postcss <8.2.10
- Feature request: Load postcss.config.js from .storybook folder if available HOT 3
- [QUESTION] Support for .cjs extension of postcss config file? HOT 2
- [Bug] Doesn't work with CSS modules HOT 4
- [Bug]-ish including addon created empty object in config.module.rules
- [Bug] Storybook not reading the postcss.config.js file HOT 2
- [Bug] Webpack isn't marked as a transitive peer dependency
- Add support for PostCSS 8 HOT 9
- [Question] Why is there a version 3.0.0-alpha.1 HOT 2
- [Bug] @storybook/addon-postcss 3.0.0 breaks with node-logger error `Cannot use import statement outside a module` HOT 7
- [security] Fix json5 to fix CVE-2022-46175 vulnerability HOT 1
- [Bug]
- Use the new Framework API
- Warning appears in terminal when using @storybook/addon-postcss with Storybook 7.0.2 HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from addon-postcss.