How to properly set up Tailwind in a project with Vue+Vite and Storybook

[molul]

I'm starting to work in a project with Vue+Vite and Storybook, and I'm trying to add Tailwind.

The project has the following structure (leaving only the important files/folders):

.storybook
|--main.ts
|--preview.ts

src
|--components
|--styles
|--index.css

stories
|--(several folders for all stories)

I've installed Tailwind following the Vite+Vue instructions (https://tailwindcss.com/docs/guides/vite#vue).

For step 4, I added the @tailwind base; @tailwind components; and @tailwind utilities; at the bottom "src/styles/index.css" (it contains some css imports, and then at the end I call @tailwind styles), which is called by ".stories/preview.ts".

However, Tailwind classes are not loaded.

I was able to make it work somehow by building the css ("npx tailwindcss -o tailwind.css", then moved this css to "src/styles", then imported it in "src/styles/index.css"), but of course that's not the way to do it.

Can't find any proper instructions to make Tailwind work in a project like this (even in Storybook website). I've tried adding storybook/addon-postcss to ".stories/main.ts" like this:

addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss')
        }
      }
    }

Also tried defining "content" in tailwind.config.js like this:
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './stories/**/*.{vue,js,ts,jsx,tsx}'],

And adding postcss-import to postcss.config.js like this:

export default {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {}
  }
}

So far, no luck. If anyone has some hint, it would be greatly appreciated :)

[alex-krasikau]

Hey @molul!

You mentioned adding @tailwind directives at the bottom of your src/styles/index.css. Normally, these should be at the top of your CSS file. Ensure your index.css starts with these lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

And ensure Correct Imports:

• Verify that your src/styles/index.css (where you've added the Tailwind directives) is correctly imported in your Vue components or the main entry file of your application.
• In your .storybook/preview.ts, make sure you are importing the src/styles/index.css to apply global styles.

[molul]

Thanks for the quick reply, @alex-krasikau. Sorry, I should have explained that more in depth.

In index.css, there are only some imports like

...
@import 'menu/tabmenu.css';
@import 'menu/tabmenu-tieredmenu.css';
@import 'menu/tabmenu-splitbutton.css';
...

...and so on. And according to the docs, @import statements must come first (in fact, I just tried putting the @tailwind lines on top and broke every other style).

And regarding the imports, I tried both adding the three @tailwind lines at the end of/src/styles/index.css and adding this line to preview.ts:
import 'tailwindcss/tailwind.css'

When I add that line instead of the three @tailwind lines, I can see in Chrome's inspector Network tab that tailwind.css was in fact loaded, but when clicking on the file, I see this content:

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/node_modules/tailwindcss/tailwind.css");import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"
const __vite__id = "/Users/luis/Desktop/Work/Dev/Cesefor/repos/timberui/node_modules/tailwindcss/tailwind.css"
const __vite__css = "@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
export default __vite__css
import.meta.hot.prune(() => __vite__removeStyle(__vite__id))

which doesn't look right, as in another project where I have Tailwind running correctly, the file is way bigger.

More precisely, the fourth line ("const __vite__css = ..."), in the other project, contains all the tailwind styles. The rest is almost the same. The only other different thing is the penultimate line (export default __vite__css), which doesn't exist in the other project's tailwind.css file.

Not sure if that might give a hint on where the import is failing to load all the styles.

[alex-krasikau]

Re-check tailwind.config.js: Make sure your Tailwind configuration file is correctly set up. It's possible that a misconfiguration here is causing the styles not to compile fully.

Modify Vite Configuration: Check your vite.config.js to see if there's anything that might interfere with CSS processing. Sometimes, specific loaders or plugins can conflict with Tailwind's processing.

Try Direct Tailwind Import: Instead of importing from tailwindcss/tailwind.css, try directly importing Tailwind in your main Vue file (e.g., App.vue or main.js/ts) like this:

import 'tailwindcss/base';
import 'tailwindcss/components';
import 'tailwindcss/utilities';

This approach bypasses the need for the CSS @import and might work better with Vite's module system.

Clear Cache and Rebuild: After making these changes, clear Vite's cache and rebuild the project. Sometimes stale cache can cause unexpected issues.

[molul]

Thanks again :)

Here's my tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

vite.config.ts:

import { resolve } from 'node:path'
import * as path from 'node:path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Icons from 'unplugin-icons/vite'
import checker from 'vite-plugin-checker'
import vue from '@vitejs/plugin-vue'
import postcssNesting from 'postcss-nesting'
import { fileURLToPath } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      dirs: ['./src/composables', './src/components'],
      vueTemplate: true,
      dts: 'src/auto-import.d.ts'
    }),
    vue(),
    dts({ rollupTypes: true }), // Do not export typing from single src files
    checker({
      vueTsc: true
    }),
    Components({
      dirs: [
        './src/components/'
        // Component folders that should be auto-imported
      ],
      dts: 'src/components.d.ts',
      directoryAsNamespace: true
    }),
    Icons({ compiler: 'vue3' })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
      // '@/components': path.resolve(__dirname, './src/components'),
      // '@/data': path.resolve(__dirname, './data'),
      // '~': path.resolve(__dirname, 'node_modules/')
    }
  },
  css: {
    postcss: {
      plugins: [postcssNesting]
    }
  },
  build: {
    cssCodeSplit: false,
    cssTarget: 'chrome61',
    target: 'esnext',
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'TimberUI',
      fileName: 'timberUI'
    },
    rollupOptions: {
      external: ['vue', 'primevue', 'chart.js'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

Tried importing the three files in ".stories/preview.ts" as you suggest (I had to add ".css" to all of them, otherwise they wouldn't be detected), but I'm in the same situation. The three css files are loaded, and if I open them from Chrome's inspector Network tab, I get an almost empty file:

...
const __vite__css = "@tailwind base;\n"
...

It looks as if "@tailwind" directive wasn't converted to the styles, but just taken as a string.

Finally, regarding clearing cache, the only thing I found was deleting the "node_modules/.vite" directory. I did it and then rebuilt the project, but same result :(

[alex-krasikau]

Could you please comment out the postcss: { plugins: ... } section from the Vite configuration and update the PostCSS config to look like this:

export default {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    'tailwindcss': {},
    'autoprefixer': {},
  }
}

Please make sure that you have set up postcss-import by running the following command: npm install -D postcss-import.

After that, you may need to experiment with a few CSS import configurations that you have tried before.

[molul]

You nailed it! It's working now.

Thank you very much ^_^

[gmesml]

For anyone starting out fresh nowdays after the wizard with npm create vite@latest, follow tailwind instructions, place your import on style.css for tailwind, set your content config on tailwind.config.js finally add vue files support like:

so vue key needs to join the band:

"./src/**/*.{vue,js,ts,jsx,tsx}",

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note: the vue file support enables tailwind without any additional efforts than what official docs say. Posts above might be outdated or prioritize other tools.