I appreciate there are people who find Tailwind useful and are productive with it, but it has this clean yet generic look that I now see everywhere, because Tailwind is now everywhere.
The same way everything looked like Bootstrap a decade ago.
Tailwind CSS v4.0
131–140 of 296 posts
Re: Tailwind CSS v4.0
#132Earlier quoted context omitted.
FFS we don't have local dependencies. Which means we don't have any local node_modules and have never ran npm install (there are no dependencies to install!). There is no lock file or dependencies. Our Apps don't have any npm dependencies nor needs to run npm install by design, we're not going to start now, as already stated we're switching to `tailwindcss@v3` instead. The point is this was a documented supported use…
YOU DO have a local dependency. Just add a mostly empty package.json like this: { "devDependencies": { "tailwindcss": "^3.4.17" } } Run npm install once, and be done with it. You could even commit your node_modules if it helps.
We don't, we use npx to avoid needing any local dependencies.
`npx tailwind@v3` is the solution, definitely wont be committing node_modules to git, ever.
Re: Tailwind CSS v4.0
#133Earlier quoted context omitted.
We only use npm dependencies and bloated node_modules folders [1] if we absolutely have to and for our non node.js Apps we explicitly don't. [1] https://www.reddit.com/r/ProgrammerHumor/comments/6s0wov/hea...
But why not though I also use tailwindcss in a non-node project, but use npm package / lock files to easily lock javascript / css dependencies and make renovate able to update them for me.
I've linked to why. We prefer #NoBuild solutions where we'd only use local npm deps/node_modules if we absolutely have to, and for non JS Apps we don't.
Re: Tailwind CSS v4.0
#134As a once-strident critic of Tailwind for its many failings and incompatibilities with the state of the actually-modern "vanilla" web art, I am very pleased to see the huge strides they've made with v4. Being able to access the Tailwind theme through native CSS variables (they even have an example in the docs of a button component written in native CSS in an external stylesheet using native variables! Oh happy day!)…
I'm still a critic in terms of actually using it, but what I find amazing about tailwind is how amenable it is to AI-generated workflows. It seriously works _so good_. Anything can be expressed, and systematically. There's something amazingly useful there.
> what I find amazing about tailwind is how amenable it is to AI-generated workflows
It's highly amenable to human workflows as well. Of course, humans are more disparate than AIs so it doesn't suit all humans - no tool can. But it sure does seem like a majority of humans web developers like it.
Re: Tailwind CSS v4.0
#135Question for people who are good at CSS stuff. I am not. I'm upgrading a personal Phoenix project to 1.7, and Phoenix now uses Tailwind by default. So I thought I'd try and update my one page thing to use it instead of Bootstrap. So far, it looks like crap whereas the Bootstrap one looked 'good enough'. What's the easiest way to get something that looks kinda sorta decent, with some nice defaults, without trying to b…
You can check out Halfmoon too instead of Bootstrap: https://www.gethalfmoon.com/
Re: Tailwind CSS v4.0
#136Tailwind’s abuse of CSS classes as a DSL has always felt like a hack to me. You shouldn’t need a special editor extension to get highlighting/autocomplete/etc, just use TypeScript and a CSS-in-TS solution.
> just use TypeScript and a CSS-in-TS solution
THIS is the definition of a hack to me, so yeah.
Re: Tailwind CSS v4.0
#137Did they really nuke the entire js config file? I have a number of advanced use cases that depend on it, like eliminating false-positive content matches.
Re: Tailwind CSS v4.0
#138Last time I tried v4 the automatic content detection was pretty bad. It would falsely detect tailwind classes if it seen a similar name in a string in a code file. It seemed pretty dumb.
That is more or less how it worked in v3 already, because any string could be used as a CSS class. "The way Tailwind scans your source code for classes is intentionally very simple — we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name." https://v3.tailwindcss.com/docs/content-configuration#clas…
In v3, one can use `blocklist` in the config to eliminate false-positives, but with the config file gone, this seems no longer possible, so I won't be upgrading.
In one project, roughly 75% of the detections were false-positives, unnecessarily bloating the CSS.
Re: Tailwind CSS v4.0
#139Earlier quoted context omitted.
> a few classes You must be working with very good product owners then. The ones I've worked with love to specify the hell out of every possible detail. Like a web form is their personal HGTV renovation. I tried tailwind once and the classes ended up being an order of magnitude more than the markup. It got hard to read, quickly.
you can use @apply to merge the various utility classes together in to something resembling a name, like .btn-primary { @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75; } But their v3 docs seem to be very against this. "Whatever you do, don’t use @apply just to make things look “cleaner”. Yes,…
For buttons, I think the 'blessed' way to do it is to use (react) components and have the tailwind classes encapsulated there. It makes sense; you have a layer of abstraction where the implementation of your theme is in the "lower level building blocks" of your components. (Call it a component library if you want)
I generally only use @apply when there are some heavier external interactive libraries that are hard to style. Like for example if you're embedding markup in your application, and you need to apply a set of styles to the markup it generates, and you can't do that directly in react because you don't control that part.
Re: Tailwind CSS v4.0
#140Earlier quoted context omitted.
you can use @apply to merge the various utility classes together in to something resembling a name, like .btn-primary { @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75; } But their v3 docs seem to be very against this. "Whatever you do, don’t use @apply just to make things look “cleaner”. Yes,…
I agree with Tailwind's stance on this. You really don't need @apply if you're breaking things down to smaller components. I often see people have things like text1 text2 ... . This is where I think we need a linter to warn against things like that. Make those 's a component!
I have bern heavy Tailwind user from before v1.
It actually doesnt matter where you make the class grouping. You can make it in your templating language or you can make it in @apply. I prefer @apply because the same grouping can be reused if done correctly. @apply is great.
The reason they are discouraging @appply is because its hard feature to implement and many people dont understand how it works so they get to problems and create issues. It bothers Authors so much they have always been considering taking @apply out but i think they know big chunk of the userbase would leave to different similar project.