I have recently started using Tailwind. I've been writing CSS since it was invented in the 90s. I'd consider myself a CSS expert. I'm using Svelte (components). When Tailwind doesn't do what I want, I write a quick CSS class. I also don't like the long class strings in the HTML, and haven't yet found a good workaround for that, but in general. I like Tailwind.
Are you familiar with @apply? I've found this useful when I notice that I am reusing styles for things that repeat again and again, like form fields or buttons. https://tailwindcss.com/docs/reusing-styles#extracting-class...
I am, but unfortunately modifiers are not supported unless you use layers, which don’t work in svelte components. So you can only use tailwind classes with no modifiers, which is mostly what I love about tailwind.
Tbh a lot of times when people say beginner they really mean “this is way easier than the way I’m used to, and that freaks me out because it means the old way is redundant, so I’ll claim this is for beginners”
By beginners, I meant people who know HTML and some CSS, but not enough to design a great UI. Tailwind allows them to add a few classnames and the page looks great. On the flip side, you have a developer who can design using CSS. Tailwind comes along and, although it’s great, you’re learning new classnames and now you’re no longer using web standard properties (CSS).
Making your own class names arent a standard either. I dont see why you would reinvent and abstract things over and over again in every project?
Maybe I'm going out of a limb here, but wasn't the whole point of CSS to not have to touch the markup when changing the styling? Not trying to talk Tailwind down, I have just missed a lot of the evolution of web design in the past 15 or so years.
I've never understood the point of separating markup from the design. I've seen CSS Zen Garden and... neat? But I don't get the point in real-world use. I've never had to redesign a UI in a way where I'd only change CSS and not also be moving around markup in the process. And once you're changing both of those things, there's the overhead of cross-referencing and keeping names and hierarchy in sync. At that point I d…
Well you have that CSS zen garden thing nowadays. It's all the different media, screen sizes, user preferences. And instead of writing multiple classes that defines styles for different outputs you just have one and let CSS handle the differences. No need to duplicate classes, just semantic names.
It absolutely isn’t a very fancy bootstrap, that would be more like DaisyUI
Okay you pointed me at a Tailwind plugin that provides Bootstrap classes. I have no idea what point you're trying to make.
> a cursory look gives me the instinct that Tailwind is kinda like Very Fancy Bootstrap
I was refuting this as it is not really the same, and pointing to you something (a UI library built with Tailwind) which is more logically comparable to Bootstrap.
These are fairly complex use-cases that aren't needed for 99.9% of CSS people write. In most cases I'm throwing together a handful of components in a flex container or right-aligning some buttons or something. And for that typical CSS usecase, I find Tailwind way better both for quickly iterating and for hopping into code someone else wrote. I love not having to bounce between and cross-reference 2 (or more!) files (…
Tailwind is honestly great for beginners since it "simplifies" CSS into short-hand classes. The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. I'm personally scared of forgetting CSS if I use Tailwind extensively. I also don't like the aesthetic of all the classnames being bunched together, but Tailwind does have value.
I know CSS and have been using it for over two decades. I found that using Tailwind was like having a mental burden taken from me. I don't care about exact pixel values, most of the time, I just want a consistent UI with "some level of spacing". I don't want to do strange niche stuff 99% of the time. Tailwind's strength is the constraints and defaults it provides you.
Tailwind has made building components in React an absolute joy for me. I don't need to scroll up to find my css-in-js definitions, I don't need to change windows to find the CSS modules, it's all there, in one place.
I hope what you describe will eventually be true for me, but so far the purported benefit of not jumping around isn't being realized. After 5 weeks of using Tailwind every day, I still have to switch between my file and the Tailwind docs fairly often to look up whatever shortcut classes I need. So far I just miss CSS modules. Having my .tsx and .scss files both visible in split screen wasn't so bad.
Highly recommend the VSCode plugin where you get autocomplete and also mouse-over popups that tell you what classes translate to.