.eslintignore can be replaced by an ignorePatterns key in .eslintrc.cjs
Unless you’re ignoring entire directories or using Prettier in your editor, .prettierignore can be replaced with // prettier-ignore comments in files you want to ignore, or specifying globs in the command line (usually in the package.json script fields)
The entirety of .prettierrc can be replaced by a prettier key in package.json
Everything that ends in .ts, .js, and .cjs a script, not a config file, and they could all be moved to a separate folder and pointed at with command line flags
All of the options above are categorically worse than the standard layout
pnpm-lock.yaml and flake.lock aren’t config files and shouldn’t be edited unless you know what you’re doing
But is it not really annoying to redefine the entire style in the class list of every component? Like if you have multiple things that look almost identical you need about a dozen classes that are identical on each and if you ever want to change that you have to go through each of them and change it, rather than using css classes how they’re actually supposed to be used and changing it in a single place
That’s where the good system design part comes in.
If you have a dozen identical looking components, they should have been one component imported into a dozen places. Keep it DRY.
If you’re more concerned about stuff like common borders or background colors being applied everywhere, you can always use the “@apply” directive to create a new reusable class.
Tailwind makes creating and iterating through design concepts so much faster and easier if your system is designed well.
I agree that it’s useful if you’re trying to create something quick and small but as soon as you want to do anything where there’s complexity that needs to be kept consistent then it falls apart for me. Surely tailwind is the exact opposite of DRY with the way you specify properties directly on the component instead of in a normal css system?
Tailwind isn’t any more or less DRY than normal CSS.
First off, it’s rare to use CSS in the intended way these days - scoped styling has become very popular for good reasons, which means component styles are either already separated, or you’re importing things. This doesn’t change with Tailwind, you can still import things just the same.
But where it shines is removing the need for arbitrary class names. Almost every CSS codebase I’ve seen used class names differently, sometimes even for the same thing. How often have you seen .container overloaded with different meanings? Instead of having to come up with individual class names that might or might not actually be descriptive, I connect the styles to the elements that use them. No more jumping around between CSS and JS, no more arbitrary names - classes have well-defined name structures that you learn once, and use for every project after that.
I’ll use Svelte as an example. In Svelte, you can just put a style tag at the bottom of your component, and everything you put in there is automatically scoped to it. I’m not hunting through dozens a CSS files trying to find where a class was overridden and adding !important everywhere. Using vanilla CSS allows me to keep my markup clean and concise so I can better see the actual structure of each component without dozens of CSS class names cluttering everything up.
Sure, you can write your own class in Tailwind using the @apply directive, but why not just add a global CSS class? That’s essentially what you’re doing anyways. And now you don’t have to hunt through multiple layers of abstraction to figure out what styles are actually being applied.
In my experience, Tailwind was good as long as I didn’t try to do anything too interesting. What ended up happening in my project was that I would use Tailwind classes for basic styling, then break into vanilla CSS whenever Tailwind wasn’t sufficient. And that meant I was looking in multiple places to see what styling was affecting my component… which kinda defeated the purpose of using Tailwind.
Personally, I also just found Tailwind harder to read. I prefer to read code vertically rather than horizontally.
It does remove a small aspect of its usefulness, but the other ones I’ve mentioned still exist.
I’ll use Svelte as an example. In Svelte, you can just put a style tag at the bottom of your component, and everything you put in there is automatically scoped to it. I’m not hunting through dozens a CSS files trying to find where a class was overridden and adding !important everywhere. Using vanilla CSS allows me to keep my markup clean and concise so I can better see the actual structure of each component without dozens of CSS class names cluttering everything up.
Several points:
You still have to hunt through the file to find any selectors applying to your elements. There’s still a bunch of vertical jumping around.
How often do you actually need to see the structure of your DOM without styles? I want to see it with styles much more often than without.
You still have to come up with unique class names for everything in your DOM, or you’ll have brittle selectors. This means that for every single component in every single project I have to learn the class names, and they might even change over time. This is a lot of overhead.
In my experience, Tailwind was good as long as I didn’t try to do anything too interesting. What ended up happening in my project was that I would use Tailwind classes for basic styling, then break into vanilla CSS whenever Tailwind wasn’t sufficient. And that meant I was looking in multiple places to see what styling was affecting my component… which kinda defeated the purpose of using Tailwind.
You almost always have to look in multiple places with normal CSS styling, since it’s cascading. If I can solve 95+% of my apps styling needs inline and just break out for special cases, I still remove most of the jumping around and class name overhead and so on. This is still a massive advantage.
I guess it comes down to preference. I personally don’t mind scrolling down a little bit to see my styles if it means the structure of the component is cleaner. I’ve found that I can iterate faster that way. If things get too unwieldy, that usually indicates to me that I should extract something out into a separate component.
About point 3. At least in svelte, you don’t have to worry about having unique class names. The styles are scoped to the component. Meaning that the CSS you write in one component doesn’t affect any other components (unless you explicitly want it to). So you can reuse class names on multiple components and they won’t interfere with each other. for small components, I’ll often not even use class names if I can get away with it. I’ll just use element selectors.
You can also get this functionality with React and Vue using CSS modules.
I can see why one would prefer Tailwind over traditional CSS though. Especially if you’re writing straight HTML/CSS, or if your chosen framework doesn’t support scoping styles to your component.
I guess it comes down to preference. I personally don’t mind scrolling down a little bit to see my styles if it means the structure of the component is cleaner. I’ve found that I can iterate faster that way. If things get too unwieldy, that usually indicates to me that I should extract something out into a separate component.
It definitely is, everyone should develop the way they are most comfortable. That’s Tailwind for a lot of people, but it will never be everone.
About point 3. At least in svelte, you don’t have to worry about having unique class names. The styles are scoped to the component. Meaning that the CSS you write in one component doesn’t affect any other components (unless you explicitly want it to). So you can reuse class names on multiple components and they won’t interfere with each other. for small components, I’ll often not even use class names if I can get away with it. I’ll just use element selectors.
I was talking about having to find unique class names inside a scoped context. Even from that perspective, my complaint is nevertheless completely valid - it’s still a lot of overhead and has been my biggest painpoint when maintaining a lot of applications in the past.
Sure, some people will have that reaction. In my anecdotal experience you’re part of the absolute minority though, at least 80% of devs I know who have tried Tailwind love it.
<span style="color:#323232;">git rm -- .*
</span><span style="color:#323232;">git commit -m "be better"
</span><span style="color:#323232;">git push --force origin/main
</span><span style="color:#323232;">shutdown now # take the rest of the week off - you've earned it
</span>
I’m a backend dev. I needed basically a single js function for my personal website that called out to some NPM package. I thought: I’ll do this the proper modern way, typescript and everything. Result: under 10 lines of code, but 12 config files (and 1.5h of fiddling with ES Modules vs CommonJS).
So it’s hell for every tool to have a somewhat easy and similar way to customize it to your exact needs? Hard to imagine that working better imo. If there’s a problem here, it’s that you’re overusing tools.
If you think this is hell, you should try using terraform. Some of the most common basic cloud things will mean hundreds of weird, largely illegible files
If all configs could use the same format and be in the same place, that would be nice. Although I think eventually you’d want to split out that config file into multiple places, because having a config thousands of lines long would suck.
If the picture in the OP is the only alternative, I wouldn’t mind, you can easily collapse json/yaml and only focus on the section you need. Maybe split into files based on functionality.
Aren’t these configs in the OP already split by functionality though? If each of these of config files were only going to be a few lines long, having it all in one file would be great.
Well, for example, there’s no reason eslintrc and eslintignore need to be separate files in any scenario, i would group them and prettier into “formatting”. But, yes I agree, one big file is preferred in most scenarios.
I wish something like .config would be a thing for storing configuration files in repositories. Instead we have a .vscode, .github, .gitlab, .idea, .vs, etc
I know XML is very last century but if they could coexist in one file, a file that treats each config section as an object, so we can create a Project Object Model, call it pom for simplicity, and then if you are old store it in xml and the you could have only one file and call it pom.xml and then maybe one day someone can make this very useful file a bit more modern and turn it into json or yaml but for now a single pom.xml could save us from that config hell others speak of /s
Add comment