5 ms·
You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue .btn-blue { @apply py-2 px-5 flex items-center
by damnencryption 6y ago
You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue
.btn-blue {
@apply py-2 px-5 flex items-center bg-blue-500 text-white rounded
}
So I don't really see that as a problem. You are supposed to refactor your styles later to be more reusable. What tailwind provides is fast iteration and design. I love that.
- systemvoltage 6y agoI could use sass to do the same.
- damnencryption 6y agoYes. You can use tailwind with sass as well though it's not recommended. Think of tailwind as a framework for all your styling needs while sass is more a functional language to generate CSS for you.
- propelol 6y agoPartially. You'll lose the system Tailwind gives you, which makes it easier to be consistent.
- systemvoltage 6y agoI handcraft that system myself. It's like buy Ikea furniture and assembling it vs. having your own woodworking shop to handcraft furniture with precise requirements. These frameworks have made me lazy. I think CSS design is pretty much exactly the same as any craftsmanship job - there is so much pleasure from building it from the ground up. No, I still get the knots in the wood out by using reset.css. Also, I try to not use class selectors as much as possible. HTML looks sterile and spartan with only a handful of span tags or id tags for very specialized targetted changes. I can see why people use frameworks - its fast and quick. But you lose personality in the outcome.
- bnt 6y agoThe exact problem is the 99% of people who DON’T do this and their markup ends up a Frankenstein’s monstrosity. I don’t know if it’s the new crop of front-end “developers” who don’t know the very basics or just hipsters being hipsters and YOLO all the things. Tailwind (IMHO) promotes bad practices and needs to explicitly state that you SHOULD use @apply or a puppy somewhere will die.
- damnencryption 6y agoI think you can blame compilation time for that. If you only use tailwind utility classes, there is no need for recompilation on every change but with @apply directive and external CSS file, the thing gets compiled every time you make a change. I wonder if they can bypass compilation in development mode somehow.
- dawnerd 6y agoOooorrrr some of us just don't care what you might think are good practices. I find tossing classes is more maintainable than trying to refactor down.
- rubans 6y agoI'm a FE dev with 10 years experience. I've only started using Tailwind specifically in the last year or so, but I've been using functional CSS for about 6 years. I don't believe using @apply is a maintainable approach. A better approach is to use view templates. In fact Adam Wathan recommends this way too in this video https://youtu.be/J_7_mnFSLDg https://youtu.be/J_7_mnFSLDg
- bigbassroller 6y agoI second this! I have gone full circle myself. From Dreamweaver (have to start somewhere), hand coding, Bootstrap classes and modifying them, then naturally started using utility classes. Finally made the switch to Tailwind (felt like cheating on a lover, because I loved Bootstrap so much). I then went full on utility classes and low and behold, discovered @apply with nested @screen media queries and went right back to writing clean HTML with named CSS classes that use utility classes in a SCSS file. Its so cool to me, I want to tell everyone about it.
- bigbassroller 6y agoPS: Plus postcss purge. CSS ecosystem is complete!
- irrational 6y ago> Plus postcss purge What does this mean?
- theIV 6y agoI believe they're referring to https://github.com/FullHuman/purgecss https://github.com/FullHuman/purgecss.
- __abc 6y agoPlease, tell me more :)
- bigbassroller 6y agoHere is an example off the top of my head, while on iphone: .card { @apply flex flex-row shadow rounded-md p-4; @screen md { @apply flex-col p-6; } yada... yada... } then in tailwind config, point the purge path to your html file(s) to purge. End result is css file with no more and no less than what you need, and in the web inspector you see clean HTML markup and clean CSS declarations. edit: typo
- usaphp 6y agothat's ridiculous, why not just write padding: 2px 5px; display: flex; align-items: center; color: #fff; You are basically just creating a set of attributes that just mimic standard css properties, I find this approach of tailwind absolutely counter productive, and I am surprised that it gets so much popularity.
- adamzapasnik 6y agoI think there are two reasons: - you can copy the classes from html directly into @apply (you need to tinker a bit more to get responsive/hover/etc classes to work, though) - you work with predefined values, so if you switch color in tailwind.config.js, it's gonna get correct value in the @apply class too. That's the way I see it
- IggleSniggle 6y agoFor the second one, couldn’t you get the same effect by just using css variables?
- adamzapasnik 6y agoSure you can and you should, right? But this way you have to write couple of classes more, couple of variables more. And with Tailwind you just define/change value in the config and you have all the classes generated, so the changes are minimal.
- usaphp 6y ago2. which values are you going to ever change in align-center, display-flex and text-color-white, it's not like you will change the display flex to mean display block or align center to mean align start, it will always be the same. Same with color white and 95% of other classes that tailwind uses.
- davidwparker 6y agoQuick FYI, py-2 is REM based, not pixel. So you know your design will fill properly.
- sev 6y agoDidn't the @apply tag get rejected from the spec? https://www.chromestatus.com/feature/5753701012602880 https://www.chromestatus.com/feature/5753701012602880
- jwr 6y agoYou mean that @apply tag? https://caniuse.com/css-apply-rule https://caniuse.com/css-apply-rule That is supported by 0% of browsers? Or am I missing something?
- Scarbutt 6y agoyou missed reading 'postcss'
- jaredcwhite 6y agoEverybody makes @apply out to be the eventual solution to HTML soup, and a project I'm on uses it heavily—BUT the problem is you're now completely locked into a single framework. You can't ditch Tailwind and still use @apply bg-blue-500. If you used regular CSS properties, design tokens via CSS variables, etc. it would be completely portable. I've switched entire sites from one CSS framework to another and it's challenging but doable with standard approaches. With Tailwind, good luck with that…
- rvense 6y agoUm. The Tailwind compiler produces a plain CSS stylesheet with all the classes you need and none of the ones you don't. You can just dig that out of your build (or wget it from production) and stick it where you normally stick your styles(..!).
- jaredcwhite 6y agoThat's a single output file compiled down from multiple source files likely using a preprocessor…lol. That's not a solution!