tailwindcss
tailwindcss copied to clipboard
nuxt-modules
How to support legacy browsers(Chrome < 110) with PostCSS ?
How can I use this module with older browsers ?
I have a Nuxt 3 app that uses @nuxtjs/tailwindcss. Unfortunately, I struggle to setup Postcss polyfill functions along with this module. Although I see logs that correctly execute my Postcss configuration, I see no effect on my Chrome 91 device.
What am I missing here ?
In my index.vue file
onMounted(async () => {
import('css-blank-pseudo/browser').then(module => {
if (module.default) module.default()
})
import('postcss-focus-within/browser').then(module => {
if (module.default) module.default()
})
import('css-has-pseudo/browser').then(module => {
if (module.default) module.default()
})
import('css-prefers-color-scheme/browser').then(module => {
if (module.default) module.default()
})
import('focus-visible')
...
package.json
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/typography": "^0.5.16",
"@nuxtjs/tailwindcss": "^6.14.0",
"nuxt": "^3.17.3",
"daisyui": "^4.12.24",
"postcss": "^8.5.3",
"autoprefixer": "^10.4.21",
"@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
"css-blank-pseudo": "^7.0.1",
"css-has-pseudo": "^7.0.2",
"css-prefers-color-scheme": "^10.0.0",
"postcss-cli": "^11.0.1",
"postcss-custom-media": "^11.0.5",
"postcss-fail-on-warn": "^0.2.1",
"postcss-focus-visible": "^10.0.1",
"postcss-focus-within": "^9.0.1",
"postcss-import": "^16.1.0",
"postcss-nested": "^7.0.2",
"postcss-preset-env": "^10.1.6",
nuxt.config.ts
postcss: {
order: 'autoprefixerLast',
plugins: {
'postcss-import': {},
'postcss-custom-media': {},
'css-blank-pseudo': {},
'postcss-focus-visible': {},
'postcss-focus-within': {},
'css-has-pseudo': {},
'css-prefers-color-scheme': {},
'@tailwindcss/nesting': {},
'tailwindcss': {},
'postcss-preset-env': {
debug: true,
browsers: 'chrome >= 49',
enableClientSidePolyfills: true,
features: {
'focus-visible-pseudo-class': { preserve: true },
'focus-within-pseudo-class': { preserve: true },
'has-pseudo-class': { preserve: true },
'prefers-color-scheme-query': { preserve: true },
'blank-pseudo-class': { preserve: true },
'custom-media-queries': { preserve: true },
}
},
//'postcss-fail-on-warn': {},
'autoprefixer': {
flexbox: 'no-2009'
},
}
},
Build extract:
Nuxt 3.17.3 with Nitro 2.11.12 nuxi 4:36:00 PM
[nuxt] modules:before: 0.115ms 4:36:01 PM
[nuxt] kit:compatibility: 0.031ms 4:36:01 PM
ℹ Using default Tailwind CSS file nuxt:tailwindcss 4:36:01 PM
ℹ Module @nuxtjs/tailwindcss took 12.07ms to setup. 4:36:01 PM
ℹ Module @teages/nuxt-legacy took 0.1ms to setup. 4:36:01 PM
[nuxt] kit:compatibility: 0.019ms 4:36:01 PM
[nuxt] kit:compatibility: 0.029ms 4:36:01 PM
ℹ Module @nuxtjs/i18n took 14.54ms to setup. 4:36:01 PM
[nuxt] pages:routerOptions: 0.017ms 4:36:01 PM
ℹ Module nuxt:pages took 9.6ms to setup. 4:36:01 PM
ℹ Module nuxt:meta took 1.66ms to setup. 4:36:01 PM
ℹ Module nuxt:components took 2.74ms to setup. 4:36:01 PM
[nuxt] imports:sources: 0.103ms 4:36:01 PM
[nuxt] imports:context: 0.028ms 4:36:01 PM
[nuxt] imports:dirs: 0.007ms 4:36:01 PM
[nuxt] imports:extend: 0.1ms 4:36:01 PM
[nuxt] builder:generateApp: 0.038ms 4:36:01 PM
ℹ Module nuxt:imports took 43.47ms to setup. 4:36:01 PM
ℹ Module nuxt:nuxt-config-schema took 0.27ms to setup. 4:36:01 PM
ℹ Module @nuxt/telemetry took 0.05ms to setup. 4:36:01 PM
[nuxt] tailwindcss:loadConfig: 0.017ms 4:36:01 PM
[nuxt] tailwindcss:config: 0.007ms 4:36:01 PM
[nuxt] tailwindcss:resolvedConfig: 0.015ms 4:36:01 PM
[nuxt] i18n:registerModule: 0.007ms 4:36:01 PM
[nuxt] schema:extend: 0.009ms 4:36:01 PM
[nuxt] schema:resolved: 0.005ms 4:36:01 PM
[nuxt] modules:done: 57.771ms 4:36:01 PM
[nuxt] nitro:config: 0.257ms 4:36:01 PM
[nuxt] nitro:init: 0.072ms 4:36:01 PM
[nuxt] ready: 0.005ms 4:36:01 PM
ℹ Building for Nitro preset: node-server nuxi 4:36:01 PM
[nitro] types:extend: 0.014ms 4:36:01 PM
[nuxt] prepare:types: 31.784ms 4:36:01 PM
[nuxt] components:dirs: 0.006ms 4:36:01 PM
[nuxt] app:resolve: 0.64ms 4:36:01 PM
[nuxt] tailwindcss:loadConfig: 0.006ms 4:36:01 PM
[nuxt] tailwindcss:config: 0.004ms 4:36:01 PM
[nuxt] tailwindcss:resolvedConfig: 0.018ms 4:36:01 PM
[nuxt] pages:extend: 9.756ms 4:36:01 PM
[nuxt] pages:resolved: 0.008ms 4:36:01 PM
[nuxt] components:extend: 0.221ms 4:36:01 PM
[nuxt] app:templates: 24.42ms 4:36:01 PM
ℹ Compiled app-component.mjs in 4.98ms nuxt 4:36:01 PM
ℹ Compiled types/app.config.d.ts in 5.03ms nuxt 4:36:01 PM
ℹ Compiled app.config.mjs in 5.07ms nuxt 4:36:01 PM
ℹ Compiled types/app-defaults.d.ts in 5.1ms nuxt 4:36:01 PM
ℹ Compiled types/build.d.ts in 5.14ms nuxt 4:36:01 PM
ℹ Compiled nitro.client.mjs in 4.98ms nuxt 4:36:01 PM
ℹ Compiled css.mjs in 5.02ms nuxt 4:36:01 PM
ℹ Compiled fetch.mjs in 5.05ms nuxt 4:36:01 PM
ℹ Compiled error-component.mjs in 5.09ms nuxt 4:36:01 PM
ℹ Compiled layouts.mjs in 5.12ms nuxt 4:36:01 PM
ℹ Compiled middleware.mjs in 5.04ms nuxt 4:36:01 PM
[nuxt] nitro:prepare:types: 4.944ms 4:36:01 PM
ℹ Compiled nuxt.config.mjs in 4.99ms nuxt 4:36:01 PM
ℹ Compiled paths.mjs in 4.79ms nuxt 4:36:01 PM
ℹ Compiled root-component.mjs in 4.81ms nuxt 4:36:01 PM
ℹ Compiled test-component-wrapper.mjs in 4.48ms nuxt 4:36:01 PM
ℹ Compiled types/vue-shim.d.ts in 4.51ms nuxt 4:36:01 PM
ℹ Compiled types/builder-env.d.ts in 4.56ms nuxt 4:36:01 PM
ℹ Compiled routes.mjs in 4.61ms nuxt 4:36:01 PM
ℹ Compiled pages.mjs in 4.36ms nuxt 4:36:01 PM
ℹ Compiled types/middleware.d.ts in 4.34ms nuxt 4:36:01 PM
ℹ Compiled types/nitro-middleware.d.ts in 4.37ms nuxt 4:36:01 PM
ℹ Compiled types/layouts.d.ts in 4.4ms nuxt 4:36:01 PM
ℹ Compiled unhead-options.mjs in 4.43ms nuxt 4:36:01 PM
ℹ Compiled unhead.config.mjs in 4.45ms nuxt 4:36:01 PM
ℹ Compiled components.d.ts in 4.48ms nuxt 4:36:01 PM
ℹ Compiled components.plugin.mjs in 3.35ms nuxt 4:36:01 PM
ℹ Compiled component-names.mjs in 3.25ms nuxt 4:36:01 PM
ℹ Compiled components.islands.mjs in 3.25ms nuxt 4:36:01 PM
ℹ Compiled tailwind/postcss.mjs in 6.48ms nuxt 4:36:01 PM
ℹ Compiled i18n.options.mjs in 6.18ms nuxt 4:36:01 PM
ℹ Compiled types/i18n-plugin.d.ts in 5.54ms nuxt 4:36:01 PM
ℹ Compiled nuxt-i18n-logger.mjs in 5.43ms nuxt 4:36:01 PM
ℹ Compiled imports.mjs in 6.87ms nuxt 4:36:01 PM
ℹ Compiled imports.d.ts in 6.88ms nuxt 4:36:01 PM
ℹ Compiled types/nitro-nuxt.d.ts in 9.62ms nuxt 4:36:01 PM
ℹ Compiled types/schema.d.ts in 9.91ms nuxt 4:36:01 PM
ℹ Compiled types/imports.d.ts in 11.25ms nuxt 4:36:01 PM
[nuxt] pages:routerOptions: 0.011ms 4:36:01 PM
ℹ Compiled router.options.mjs in 14.03ms nuxt 4:36:01 PM
ℹ Compiled plugins.server.mjs in 11.14ms nuxt 4:36:01 PM
ℹ Compiled plugins.client.mjs in 13.44ms nuxt 4:36:01 PM
ℹ Compiled types/plugins.d.ts in 13.74ms nuxt 4:36:01 PM
[nuxt] imports:extend: 0.047ms 4:36:01 PM
[nuxt] builder:generateApp: 0.004ms 4:36:01 PM
[nuxt] app:templatesGenerated: 19.782ms 4:36:01 PM
[nuxt] build:before: 0.629ms 4:36:01 PM
[nuxt] builder:generateApp: 0.021ms 4:36:01 PM
[nuxt] tailwindcss:internal:regenerateTemplates: 0.004ms 4:36:01 PM
[nuxt] vite:extend: 1.426ms 4:36:02 PM
[nuxt] vite:extendConfig: 0.645ms 4:36:02 PM
[nuxt] vite:configResolved: 0.005ms 4:36:02 PM
ℹ Building client... 4:36:02 PM
ℹ vite v6.3.5 building for production... 4:36:02 PM
transforming (24) virtual:nuxt:%2FUsers%2Falex%2FDocuments%2FPicTalk%2FCode.nnsync%2Fagenda-caa%2F.nuxt%2Fi18n.options.mjs
🌼 daisyUI 4.12.24
├─ ✔︎ 1 theme added https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project: https://opencollective.com/daisyui
transforming (54) i18n/locales/it-IT.json
WARN [vite:css][postcss] Using features from Stage 2 (default). 4:36:04 PM
- 'custom-selectors' disabled because it lacks the required stage (1 out of 2).
- 'image-set-function' disabled because all targeted browsers support it.
- 'media-query-ranges' enabled for:
chrome 103
chrome 102
chrome 101
chrome 100
...
random-function
relative-color-syntax
sign-functions
stepped-value-functions
system-ui-font-family
text-decoration-shorthand
trigonometric-functions
These feature(s) need a browser library to work:
blank-pseudo-class: https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser
focus-visible-pseudo-class: https://github.com/WICG/focus-visible
focus-within-pseudo-class: https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser
has-pseudo-class: https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser
prefers-color-scheme-query: https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser
transforming (165) node_modules/.pnpm/[email protected]/node_modules/keycloak-js/lib/keycloak.js
WARN [vite:css][postcss] 4:36:05 PM
WARN [vite:css][postcss] 4:36:06 PM
...
ℹ ✓ built in 12.31s 4:36:14 PM
[nuxt] vite:compiled: 0.014ms 4:36:14 PM
✔ Client built in 12321ms 4:36:14 PM
[nuxt] vite:extendConfig: 0.584ms 4:36:14 PM
[nuxt] vite:configResolved: 0.009ms 4:36:14 PM
ℹ Building server... 4:36:14 PM
ℹ vite v6.3.5 building SSR bundle for production... 4:36:14 PM
ℹ ✓ 1 modules transformed. 4:36:14 PM
ℹ ✓ built in 7ms 4:36:14 PM
[nuxt] build:manifest: 0.336ms 4:36:14 PM
[nuxt] vite:compiled: 0.008ms 4:36:14 PM
✔ Server built in 14ms 4:36:14 PM
[nuxt] schema:beforeWrite: 0.013ms 4:36:14 PM
[nuxt] schema:written: 0.007ms 4:36:14 PM
[nuxt] nitro:build:before: 0.457ms 4:36:14 PM
[nuxt] prerender:routes: 0.007ms 4:36:15 PM
[nitro] prerender:routes: 0.176ms 4:36:15 PM
ℹ Initializing prerenderer nitro 4:36:15 PM
[nitro] prerender:config: 0.004ms 4:36:15 PM
[nitro] prerender:init: 0.012ms 4:36:15 PM
[nitro] build:before: 0.007ms 4:36:15 PM
[nitro] rollup:before: 0.023ms 4:36:15 PM
[nitro] types:extend: 0.017ms 4:36:15 PM
[nitro] compiled: 0.016ms 4:36:15 PM
ℹ Prerendering 1 routes nitro 4:36:15 PM
[nitro-runtime] request: 0.02ms 4:36:15 PM
[nitro-runtime] render:before: 0.012ms 4:36:15 PM
[nitro-runtime] render:html: 0.007ms 4:36:15 PM
[nitro-runtime] render:response: 0.004ms 4:36:15 PM
[nitro-runtime] beforeResponse: 0.007ms 4:36:15 PM
[nitro-runtime] afterResponse: 0.004ms 4:36:15 PM
[nitro] prerender:generate: 0.007ms 4:36:15 PM
[nitro] prerender:route: 0.007ms 4:36:15 PM
├─ / (18ms) nitro 4:36:15 PM
[nitro-runtime] close: 0.005ms 4:36:15 PM
[nitro] prerender:done: 0.004ms 4:36:15 PM
ℹ Prerendered 1 routes in 0.633 seconds nitro 4:36:15 PM
[nitro] build:before: 0.006ms
✔ Generated public .output/public nitro 4:36:15 PM
[nuxt] nitro:build:public-assets: 0.024ms
[nitro] rollup:before: 85.173ms
[nitro] types:extend: 0.014ms
ℹ Building Nuxt Nitro server (preset: node-server, compatibility date: 2025-05-15) nitro 4:36:15 PM
✔ Nuxt Nitro server built nitro 4:36:17 PM
├─ .output/server/chunks/_/error-500.mjs (4.88 kB) (2.06 kB gzip)
├─ .output/server/chunks/_/error-500.mjs.map (340 B) (252 B gzip)
├─ .output/server/chunks/build/client.manifest.mjs (24 kB) (1.95 kB gzip)
├─ .output/server/chunks/build/client.manifest.mjs.map (11.1 kB) (1.06 kB gzip)
├─ .output/server/chunks/nitro/nitro.mjs (213 kB) (50.6 kB gzip)
├─ .output/server/chunks/nitro/nitro.mjs.map (6.29 kB) (1.04 kB gzip)
├─ .output/server/chunks/routes/renderer.mjs (12.6 kB) (4.1 kB gzip)
├─ .output/server/chunks/routes/renderer.mjs.map (1.62 kB) (383 B gzip)
├─ .output/server/chunks/virtual/_virtual_spa-template.mjs (94 B) (100 B gzip)
├─ .output/server/chunks/virtual/_virtual_spa-template.mjs.map (112 B) (111 B gzip)
├─ .output/server/index.mjs (353 B) (204 B gzip)
└─ .output/server/package.json (655 B) (293 B gzip)
Σ Total size: 1.71 MB (404 kB gzip)
[nitro] compiled: 0.029ms
✔ You can preview this build using node .output/server/index.mjs nitro 4:36:17 PM
[nuxt] build:done: 2.856s 4:36:17 PM
[nitro] close: 0.092ms 4:36:17 PM
[nuxt] close: 0.235ms
