I've been trying to get Storybook to work with TailwindCSS in a CRA. However, I am unable to use any TailwindCSS classes and am getting this message when I start Storybook:
44% building 284/307 modules 23 active ...Documents\GitHub\<my project name>\node_modules\core-js\internals\set-to-string-tag.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
44% building 287/307 modules 20 active ...Documents\GitHub\<my project name>\node_modules\core-js\internals\set-to-string-tag.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
51% building 347/375 modules 28 active ...cuments\GitHub\<my project name>\node_modules\core-js\modules\es.symbol.unscopables.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
69% building 1065/1075 modules 10 active ...uments\GitHub\<my project name>\node_modules\core-js\modules\es.number.is-integer.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js
I've followed this guide. I've also checked the question here, and here's package.json:
{
"name": "some-project-name",
"version": "0.1.0",
"private": true,
"engine": {
"node": "^16.5.0"
},
"dependencies": {
"@craco/craco": "6.2.0",
"@testing-library/jest-dom": "5.11.4",
"@testing-library/react": "11.1.0",
"@testing-library/user-event": "12.1.10",
"express": "4.17.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"styled-components": "5.3.0",
"web-vitals": "1.0.1"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"prod:test": "yarn build && node server.js",
"prod:start": "yarn build && pm2-runtime server.js",
"dev:up": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml up",
"dev:force": "docker-compose down && docker-compose -f docker-compose.yml -f docker-compose.dev.yml up",
"prod:up": "docker-compose -f docker-compose.yml -f docker-compose.prod.yml up",
"prod:force": "docker-compose down && docker-compose -f docker-compose.yml -f docker-compose.prod.yml up",
"docker:build": "docker build .",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"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.3.5",
"@storybook/addon-essentials": "6.3.5",
"@storybook/addon-links": "6.3.5",
"@storybook/node-logger": "6.3.5",
"@storybook/preset-create-react-app": "3.2.0",
"@storybook/react": "6.3.5",
"autoprefixer": "9",
"postcss": "7",
"tailwindcss": "npm:@tailwindcss/postcss7-compat"
},
"resolutions": {
"babel-loader": "8.1.0"
}
}
Here's the craco.config.js:
module.exports = {
style: {
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
};
.storybook/main.js:
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: {
// HERE: OPTIONS
postcssOptions: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
},
],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
postcss.config.js (which I don't think matters here but just in case):
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.config.js'),
require('autoprefixer'),
],
};
tailwind.config.js:
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
sans: ['Montserrat'],
},
extend: {
screens: {
mx: '2048px',
},
},
variants: {
extend: {},
},
plugins: [],
},
};
I'm not able to use TailwindCSS styles in my stories components.
Here's the demo Button component:
import React from 'react';
import PropTypes from 'prop-types';
import './button.css';
/**
* Primary UI component for user interaction
*/
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
return (
<button type="button" className="bg-gray-900" {...props}>
{label}
</button>
);
};
Button.propTypes = {
/**
* Is this the principal call to action on the page?
*/
primary: PropTypes.bool,
/**
* What background color to use
*/
backgroundColor: PropTypes.string,
/**
* How large should the button be?
*/
size: PropTypes.oneOf(['small', 'medium', 'large']),
/**
* Button contents
*/
label: PropTypes.string.isRequired,
/**
* Optional click handler
*/
onClick: PropTypes.func,
};
Button.defaultProps = {
backgroundColor: null,
primary: false,
size: 'medium',
onClick: undefined,
};
The Button:
HTML in DOM:
<button type="button" class="bg-gray-900">Button</button>
Not sure where to go from here...
Update:
Went to webpack and postcss docs, and removed the options from .storyboard/main.js so use just looks like this:
use: [
{
loader: 'postcss-loader',
},
],
Now it's actually grabbing the plugins from postcss.config.js:
module.exports = {
plugins: [require('autoprefixer'), require('tailwindcss')],
};
So the warning about no plugins found went away. But still no visible change on the website.
