Tailwind CSS wrong path in a monorepo

[romatou]

Describe the bug

I have an app with client and server folders. tailwind.config.cjs, postcss.config.cjs and vite.config.ts are located in packages/client directory, so does index.css that is imported in App.tsx. A Vite createServer is created in packages/server/index.ts in middleware mode (SSR) from vitejs.dev guide.

The problem

[postcss] ENOENT: no such file or directory, open '/Users/roma/Sites/reelstories/packages/server/tailwind.config.cjs'

Vite createServer

> await createViteServer({
>       root: path.resolve(__dirname, '../client'),
>       configFile: path.resolve(__dirname, '../client/vite.config.js'),
>       server: {
>         middlewareMode: true,
>         watch: {
>           usePolling: true,
>           interval: 100,
>         },
>       },
>       appType: 'custom',
>     })

App.tsx

...
import './tailwind.css'

export default function App() {
  return (
    <div className="flex touch-pan-y flex-col">
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/order" element={<Other />} />
      </Routes>
    </div>
  )
}

Reproduction

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 248.81 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Safari: 16.3

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[fi3ework]

How is the postcss.config.cjs configed

[romatou]

How is the postcss.config.cjs configed

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.cjs' },
    autoprefixer: {},
  },
}

I partially found how to fix this in vite.config.ts but I don't understand the type that needs to be followed.

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  ...
})

I have added a string with postcss.config.cjs, the error disappeared, but Tailwind is not rendered. Now I just need to pass the plugin correctly.

[fi3ework]

Could you provide an reproduction on https://vite.new

[romatou]

Could you provide an reproduction on https://vite.new

Do you have a boilerplate with a monorepo (client + server)? If no, I'd have to make one and send a Github repository link.

Or if you could help me provide correct plugin option into vite.config.ts, I think that would fix the problem.

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [?]
    },
  ...
})

[romatou]

I found a fix for my issue with adding path.resolve(__dirname, './path/to/file') everywhere. Is there a simpler solution to this? Why Vite createServer doesn't resolve paths to a directory that is set as root (client in my case)?

packages/client/tailwind.config.cjs

module.exports = {
  content: [path.resolve(__dirname, './src/**/*.{js,ts,jsx,tsx}')],
  ...

packages/server/index.ts

createViteServer({
  root: path.resolve(__dirname, '../client'),
  configFile: path.resolve(__dirname, '../client/vite.config.ts'),
  server: {
    middlewareMode: true,
  },
  appType: 'custom',
  ...
})

packages/client/vite.config.ts

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        tailwindcss({ config: path.resolve(__dirname, './tailwind.config.cjs') }),
        autoprefixer(),
      ],
    },
  },

[surajsharma]

spent the better part of the day searching for this solution! muchas gracias.