Is there any way to write smaller/cleaner tailwind?
I love the simplicity of tailwind, especially when used with Tailwind UI. I can quickly roll out UIs and unlike more traditional UI kits I can tweak things with unlimited freedom if something isn't quite right.
However, the downside is the TONS of classes in my HTML almost gives me anxiety when opening a file. The readability and maintainability goes out the window. You can combat some of this by making reusable classes for things like buttons, but for most things that's just the side-effect of atomic design.
What I'm wondering is if anyone has found a way to make this any more manageable? I've started using this class sorter which has helped a little bit but it's still a lot. I've also tried using @apply and moving all my tailwind out of the HTML but I feel like that's not a best practice. I've also tried SailUi which puts some of the more common things into simple reusable classes.
Is there any tips or tricks or tools that help keep things cleaner and smaller?
Edit: Just found twin.macro which seems like the closest I'm going to find to pull the CSS out of the HTML and clean some things up.
Class names sorting is great! I use https://github.com/tailwindlabs/prettier-plugin-tailwindcss and https://github.com/tailwindlabs/tailwindcss/issues/7553#issuecomment-735915659, which conflict with headwind
One thing that helps me a lot is to keep cleaner and smaller frontend (e.g. react) components. Having a 300 line file and TailwindCSS on top of it is not the way to go—consider making more components where it makes sense.
I avoid the @apply directive, and the creators of Tailwind advice against it.
Finally, sometimes it just takes getting used to with a few months of practice.
Then why not use Bootstrap? I love botstrap5
I usually write normal CSS classes and use the @apply directive to use tailwind's pseudo classes, I rarely use it directly on my HTML.
Are you using any frontend framework?