Tailwind CSS wrong path in a monorepo

romatou commented 1 year ago

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

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

fi3ework commented 1 year ago

How is the postcss.config.cjs configed

romatou commented 1 year ago

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 commented 1 year ago

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

romatou commented 1 year ago

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

vitejs / vite