@adan
To configure Vue.js with PostCSS and Tailwind CSS for use with Storybook, follow these steps:
- Install the necessary dependencies:
- Create a postcss.config.js file at the root of your project with the following content:
1
2
3
4
5
6
7
|
module.exports = {
plugins: [
require('tailwindcss'),
require('postcss-import'),
require('postcss-scss'),
]
}
|
- Create a tailwind.config.js file at the root of your project with the following content:
1
2
3
4
5
6
|
module.exports = {
purge: [],
theme: {},
variants: {},
plugins: [],
}
|
- Update your Vue.js project's webpack configuration to include PostCSS and Tailwind CSS. Add the following to the webpack.config.js file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
module: {
rules: [
{
test: /.tailwind.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'postcss-loader',
},
'sass-loader',
]
}
]
}
|
- Update your Storybook webpack configuration to use the same setup. Create a .storybook/webpack.config.js file with the following content:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const path = require('path');
module.exports = async ({ config, mode }) => {
config.module.rules.push({
test: /.tailwind.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'postcss-loader',
},
'sass-loader',
]
});
return config;
};
|
- Import your Tailwind CSS styles in your project's main SCSS file:
1
2
3
|
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
|
- Now you can create Vue components with Tailwind CSS classes and use them in your Storybook stories.
That's it! Your Vue.js project with PostCSS and Tailwind CSS is now ready to use with Storybook.
