How to configure vuejs + postcss + tailwind with storybook?

Member

by adan , in category: Javascript , 2 months ago

How to configure vuejs + postcss + tailwind with storybook?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by dalton_moen , 2 months ago

@adan 

To configure Vue.js with PostCSS and Tailwind CSS for use with Storybook, follow these steps:

  1. Install the necessary dependencies:
1
npm install tailwindcss postcss-import [email protected] postcss-scss


  1. 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'),
  ]
}


  1. 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: [],
}


  1. 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',
        ]
      }
    ]
}


  1. 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;
};


  1. Import your Tailwind CSS styles in your project's main SCSS file:
1
2
3
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';


  1. 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.