[Docs]: How to resolve postcss imports

[pdevito3]

hey guys, not seeing any docs or examples on how to resolve postcss imports (e.g. tailwind).

with webpack, i would add something like the below to my main.js module exports to accomplish this. what is the approach to use with this plugin?

  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
  },

[eirslett]

Instead of webpackFinal, use viteFinal, and configure the tailwind postcss config the way Vite wants it to be configured.

[pdevito3]

i don't follow. I don't have to do anything in my vite config to make it work in my project outside storybook.

my vite config:

import reactRefresh from '@vitejs/plugin-react-refresh';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/

const path = require('path');

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src')
    }
  },
  server:{
    port: 4113
  },
  plugins: [reactRefresh()]
})

sb:

const path = require('path')

const toPath = (_path) => path.join(process.cwd(), _path)

module.exports = {
  core: { builder: "storybook-builder-vite" },
  viteFinal: async config => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          '@': path.resolve(__dirname, '/src')
        }
      },
    }
  },
  typescript: {
    check: true
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
} 

[IanVS]

This is what I use in my storybook main.cjs file:

  addons: [
    '@storybook/addon-essentials',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          // Note: Settings are picked up from postcss.config.cjs
          implementation: require('postcss'),
        },
      },
    },
  ],