Open FranciscoKloganB opened 1 year ago
Hi! The second example should work (at least with only postcss-nested
).
Hey! How are you? Sorry for the late response but I spent so much time on this, I eventually just accepted pure CSS.
module.exports = {
plugins: {
"postcss-import": {},
"postcss-focus-visible": {
replaceWith: "[data-focus-visible-added]"
},
"tailwindcss/nesting": "postcss-nested",
tailwindcss: {},
autoprefixer: {}
}
}
/* I would expect the output above (commented with // Works); */
/ But when the code minifies, from what I remember back then, it simply "spitted out" whatever I had written. /
select:focus { border-color: theme("colors.primary-light"); }
Can you show me some example on top of pure postcss-nested
(without any plugins) in a way: input, real output, expected output?
Howdy! :wave:
I am currently working on a TailwindCSS/PostCSS project and I am using the
@tailwindcss/forms
plugin. Unfortunately, it applies an undesired color styling to my forms. The author's recommended approach is to use normal CSS to override that color on the base layer which I am doing. I also havepostcss-nested
installed and configured on my project according to the instructions of TailwindCSS v3 documentation.Given the two examples below, only the first one works. The second, which I wish it worked does not. I would like to know what I am doing wrong. :(
TLDR: The first example works but I have to add
:focus
suffix to all elements I want to target.