Replies: 2 comments 2 replies
-
![]() Browser support Chrome 111 (released March 2023) |
Beta Was this translation helpful? Give feedback.
1 reply
-
Maybe you need postcss-preset-env to downgrade your CSS to be compatible with |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
hi
i am using tailwind 4 , vite, tanstack router, i am making a webview loading a url, url looks fine on chrome, but on android device with version 10/11 , the whole style did not load, but when i roll back to tailwind 3, everything is fine!
Expected behavior:
Tailwind v4 should be able to generate compatible CSS when targeting older browsers (e.g., Android 10/11 WebView) using Browserslist.
styles.css
`
@supports not (color: rgb(0 0 0 / 0.5)) {
body {
background: black !important;
}
}
@import 'tailwindcss';
`
package.json
{ "dependencies": { "tailwindcss": "^4.0.6", "@tailwindcss/vite": "^4.0.6", "@tailwindcss/postcss": "^4.1.12", "vite": "^6.1.0" }, "browserslist": [ "defaults", "Android >= 5", "iOS >= 12" ] }
vite.config.js
`import tailwindcss from '@tailwindcss/vite'
import viteReact from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import autoprefixer from 'autoprefixer'
import postcssPresetEnv from 'postcss-preset-env'
import tanstackRouter from '@tanstack/router-plugin/vite'
export default defineConfig({
css: {
postcss: {
plugins: [
autoprefixer(),
postcssPresetEnv({
stage: 2,
browsers: ['Android >= 8'],
features: {
'custom-properties': true,
},
}),
],
},
},
plugins: [
tanstackRouter({ target: 'react', autoCodeSplitting: true }),
viteReact(),
tailwindcss(),
],
})
`
and .broswerslistrc
defaults Android >= 5 iOS >= 12
postcss.config.mjs
export default { plugins: { '@tailwindcss/postcss': {}, }, }
any idea or solution except rolling back to v3?
Beta Was this translation helpful? Give feedback.
All reactions