Custom font clash with tailwind

Describe the bug

Hello, when i add tailwind, it works great so i add custom font but seems have clash issue. the tailwind feature turned off and font was working previously. if i remove the postcss the tailwind will works but not the font. i did follow the guide

on other app nextjs, reactapp they're all works

@font-face {
  font-family: "Druk";
  src: url("./assets/fonts/druk/Druk-Wide-Medium.otf") format("otf");
  font-weight: 400;
  font-style: normal;
}

and add postcss.config

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

//vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      config: './postcss.config.js',
    },
  },
})

Reproduction

https://stackblitz.com/edit/vitejs-vite-fzpebd?file=src/components/Sections/MetamaskSwap.tsx

Steps to reproduce

No response

System Info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 7.78 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/Desktop/pix/pix-dashboard-vite/node_modules/.bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Brave Browser: 111.1.49.120
    Chrome: 113.0.5672.92
    Chrome Canary: 115.0.5763.0
    Safari: 15.6.1
  npmPackages:
    @vitejs/plugin-react: ^4.0.0 => 4.0.0 
    vite: ^4.3.2 => 4.3.5

Used Package Manager

yarn

Logs

$ vite build --debug vite:config bundled config file loaded in 78.84ms +0ms vite:config using resolved config: { vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:react-babel', vite:config 'vite:react-refresh', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:asset-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:build-import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:reporter', vite:config 'vite:load-fallback' vite:config ], vite:config css: { postcss: { config: './postcss.config.js' } }, vite:config optimizeDeps: { vite:config disabled: 'build', vite:config force: undefined, vite:config include: [ 'react', 'react/jsx-dev-runtime' ], vite:config esbuildOptions: { preserveSymlinks: false } vite:config }, vite:config build: { vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: { onwarn: [Function: onwarn] }, vite:config minify: 'esbuild', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config copyPublicDir: true, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config ssrEmitAssets: false, vite:config reportCompressedSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: null, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }, vite:config modulePreload: { polyfill: true }, vite:config cssMinify: true vite:config }, vite:config esbuild: { jsxDev: false, jsx: 'automatic', jsxImportSource: undefined }, vite:config resolve: { vite:config mainFields: [ 'module', 'jsnext:main', 'jsnext' ], vite:config browserField: true, vite:config conditions: [], vite:config extensions: [ vite:config '.mjs', '.js', vite:config '.mts', '.ts', vite:config '.jsx', '.tsx', vite:config '.json' vite:config ], vite:config dedupe: [ 'react', 'react-dom' ], vite:config preserveSymlinks: false, vite:config alias: [ [Object], [Object] ] vite:config }, vite:config configFile: '/Users/dellwatson/Desktop/THERAS/vite-landing/vite.config.ts', vite:config configFileDependencies: [ '/Users/dellwatson/Desktop/THERAS/vite-landing/vite.config.ts' ], vite:config inlineConfig: { vite:config root: undefined, vite:config base: undefined, vite:config mode: undefined, vite:config configFile: undefined, vite:config logLevel: undefined, vite:config clearScreen: undefined, vite:config optimizeDeps: { force: undefined }, vite:config build: {} vite:config }, vite:config root: '/Users/dellwatson/Desktop/THERAS/vite-landing', vite:config base: '/', vite:config rawBase: '/', vite:config publicDir: '/Users/dellwatson/Desktop/THERAS/vite-landing/public', vite:config cacheDir: '/Users/dellwatson/Desktop/THERAS/vite-landing/node_modules/.vite', vite:config command: 'build', vite:config mode: 'production', vite:config ssr: { vite:config format: 'esm', vite:config target: 'node', vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] } vite:config }, vite:config isWorker: false, vite:config mainConfig: null, vite:config isProduction: true, vite:config server: { vite:config preTransformRequests: true, vite:config sourcemapIgnoreList: [Function: isInNodeModules], vite:config middlewareMode: false, vite:config fs: { strict: true, allow: [Array], deny: [Array] } vite:config }, vite:config preview: { vite:config port: undefined, vite:config strictPort: undefined, vite:config host: undefined, vite:config https: undefined, vite:config open: undefined, vite:config proxy: undefined, vite:config cors: undefined, vite:config headers: undefined vite:config }, vite:config envDir: '/Users/dellwatson/Desktop/THERAS/vite-landing', vite:config env: { BASEURL: '/', MODE: 'production', DEV: false, PROD: true }, vite:config assetsInclude: [Function: assetsInclude], vite:config logger: { vite:config hasWarned: false, vite:config info: [Function: info], vite:config warn: [Function: warn], vite:config warnOnce: [Function: warnOnce], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen], vite:config hasErrorLogged: [Function: hasErrorLogged] vite:config }, vite:config packageCache: Map(1) { vite:config 'fnpd/Users/dellwatson/Desktop/THERAS/vite-landing' => { vite:config dir: '/Users/dellwatson/Desktop/THERAS/vite-landing', vite:config data: [Object], vite:config hasSideEffects: [Function: hasSideEffects], vite:config webResolvedImports: {}, vite:config nodeResolvedImports: {}, vite:config setResolvedCache: [Function: setResolvedCache], vite:config getResolvedCache: [Function: getResolvedCache] vite:config }, vite:config set: [Function (anonymous)] vite:config }, vite:config createResolver: [Function: createResolver], vite:config worker: { vite:config format: 'iife', vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:asset-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:worker-post', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:build-import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:load-fallback' vite:config ], vite:config rollupOptions: {}, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config }, vite:config appType: 'spa', vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config } +4ms vite v4.3.5 building for production... transforming (1) index.html vite:esbuild 34.43ms tsconfck init /Users/dellwatson/Desktop/THERAS/vite-landing +0ms vite:resolve 0.31ms ./assets/fonts/druk/Druk-Wide-Bold.otf -> /Users/dellwatson/Desktop/THERAS/vite-landing/src/assets/fonts/druk/Druk-Wide-Bold.otf +0ms vite:resolve 0.37ms ./assets/fonts/druk/Druk-Wide-Medium.otf -> /Users/dellwatson/Desktop/THERAS/vite-landing/src/assets/fonts/druk/Druk-Wide-Medium.otf +0ms ✓ 366 modules transformed. dist/index.html 0.46 kB │ gzip: 0.30 kB dist/assets/Druk-Wide-Bold-0ea32bed.otf 116.67 kB dist/assets/Druk-Wide-Medium-bcad4f89.otf 167.95 kB dist/assets/index-d3afac2d.css 1.69 kB │ gzip: 0.83 kB dist/assets/index-a44eeb81.js 153.68 kB │ gzip: 50.23 kB ✓ built in 754ms ✨ Done in 1.09s.

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.

vitejs / vite