Setup TailwindCSS with PostCSS Import and Nested
3,017
Published 2022-01-26
Aside from that, if you are a fan of Scss/Saas, I also demo the nesting like creating component-based CSS files with the help of PostCSS Import to transform @import rules by inlining content.
As a designer who can code and work with CSS Architecture, it is an excellent help for scalable your Website / Web App CSS.
Github Repo:
github.com/ericsonluciano/tailwindcss-with-nesting…
If you want to buy Untitled UI - Figma UI kit and design system, go to this link: untitledui.lemonsqueezy.com/?aff=5584e
Looking for icon set? Check out Iconic, go to this link:
iconic.lemonsqueezy.com/?aff=5584e
Want to present your design with better recording, go check out screen studio, go to this link:
screenstudio.lemonsqueezy.com/?aff=5584e
-----
If you have questions or feedback, just leave a comment. I'm just trying to record without voice and cam just for fun. ✌🏻 But I will try to do tailwindcss component collections soon.
----
Sound Credit to Youtube Audio Library - The Voi
All Comments (5)
-
I love your tutorial, Would you please share the github repo?
-
hey, what is your editor font name ?
-
I've followed your tutorial and for some reason...even with my packages installed and my config files setup just like yours, I continue getting nesting errors with my css. The first error is something to do with nextjs and the build - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleS the 2nd error is what shows up in my css linter } expectedtailwindcss(css-rcurlyexpected) against something simple like this: header { @apply bg-slate-50; & > nav { @apply relative; } }
-
I don't understand what Nesting does, @apply works for me, even without add 'tailwindcss/nesting': {}, on postcss.config.js
