If you would decide or have to use Vue for a complex project today, would you use Tailwind with Vue? If yes, why? If no, why not? Would your answer and rationale change in cases, when you decide or have to use a Web application framework like Nuxt or a UI component library like Vuetify and PrimeVue?
Tailwind CSS v3.0
281–290 of 448 posts
Re: Tailwind CSS v3.0
#282Earlier quoted context omitted.
exactly. SASS (and CSS modules) are all I really need. just give me direct access to this amazing language, please!
I don't even see a need for SASS now that CSS has variables and CSS Modules provides composability.
I do use its inheritance functionality though I have mixed feelings about it. I also like how you can group classes with in each other.
Re: Tailwind CSS v3.0
#283Every time Tailwind does something great and gets posted here, the conversation devolves into the same arguments: “I don’t get it. It’s just inline styles.” What is it about CSS that gets people so offended and opinionated? If it were a new JS framework, few people would be saying “I just don’t get XYZ. Use React”. Is it because Tailwind is so drastically different and breaks people’s core ideas about separation of c…
When you first hear Tailwind's concepts, they seem to contradict everything you know about good software design. When you try it out and begin to remember some of the class names, you get into a great state of flow - it's the high developers are always chasing.
I can't help but feel that Tailwind detractors have never actually tried Tailwind or are too square to give it a chance.
Re: Tailwind CSS v3.0
#284I tried Tailwind (and a similar project Windi) on a few projects now and have some findings.
Tailwind aggressively speeds up development time of components by allowing me to stay in the same cobtext when styling things. The brevity of class names also dramatically shortens the time spent writing styles. While working on the projects I'd setup with Tailwind, I felt far more productive.
However, those were new projects. After completing them and needing to go back and modify or maintain them, the experience has been horrible. The resulting style declarations (as class names) are completely unreadable and unmaintainable. I've tried organizing them and splitting class names onto multiple lines, but it has only cluttered things.
In my experience, Tailwind (and similar projects) produce styles that are effectively read only. They are superb when writing a new component and styling things from scratch, but maintenance is nonexistent.
Because of this, I've now switched to using a CSS-in-JS solution to gain the benefits of in-context styling and still have the ability to write CSS declarations in a structured and maintainable way.
Re: Tailwind CSS v3.0
#285Earlier quoted context omitted.
Even spread out in attributes it’s hard to read
I moved to tailwind a month ago and it’s become incredibly easy to read and work with very quickly. It’s one of those frameworks that just clicks when people start using it, though I think a lot of people don’t feel that way until they put the time in to get familiar.
Exactly!
My example fit a just seven lines colocated with your HTML, in CSS you would need to read a full page in a different file.
Re: Tailwind CSS v3.0
#286I don't have the energy to explain to the naysayers why I love tailwind so much but I do have the energy to log back into HN just to comment that I absolutely love tailwind. Give it a try and maybe it'll stick!
Re: Tailwind CSS v3.0
#287I love Tailwind! It elegantly solves most pain points in writing CSS. However, it does this at the cost of readability, and you can easily end up with HTML that looks like this: Yikes! I would love to have a transpiler that produces the line above from a code like this: Yeah!
What about a helper function for that? Something like this:
const md = styles => styles.split(' ').map(style => 'md:' + style).join(' ')
const styles = [
'w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded',
md('w-32 h-32 rounded-md text-base hover:rounded-xl')
].join(' ');
Hello
Re: Tailwind CSS v3.0
#288I tried Tailwind (and a similar project Windi) on a few projects now and have some findings. Tailwind aggressively speeds up development time of components by allowing me to stay in the same cobtext when styling things. The brevity of class names also dramatically shortens the time spent writing styles. While working on the projects I'd setup with Tailwind, I felt far more productive. However, those were new projects…
Tailwind works wonders in a component based system, but component styling ought to be very fine grained to ensure maintainability.
I have created React components with TW, where the components are complex and large.
However, breaking them down into tiny functional blocks, maintenance is easier.
Re: Tailwind CSS v3.0
#289By far Tailwind has been the fastest way for me to prototype UI.
I am a developer nerd and have a good taste for design. However, during actual development, I do not have the ability to visualize what I want in the first attempt.
So, I have to tweak the look and bring out the beauty I want through a 1000 cuts. TW makes that process extremely easy. Like, mindbogglingly easy.
However, I have learnt to be careful with my code, and I often limit the styles by splitting them off into sub-components.
Re: Tailwind CSS v3.0
#290Last time I tried the jit or purge mode, some classes were missing randomly each build and broke my site. (I followed their purge rules very carefully).
The worst thing is it ONLY happens on the production build.
I like Tailwind CSS and I really hope they make it stable.