Imagine my thoughts when I first saw the TailwindCSS Framework, in my head I already thought this was one of the usual frameworks like Bootstrap, B...
For further actions, you may consider blocking this person and/or reporting abuse
YAFL
(Yet Another Framework Lock-In).
Why would I use TailwindCSS instead of using SASS/SCSS or LESS Mixins/classes from Bootstrap, Pure, Foundation, or some other library??? Also, never ever litter your markup with the literal classnames of the framework. You should always name the component what it actually is and then use the approach described in the last sentence to decorate your own style definitions. Not
btn btn-blue. How aboutproduct optionand then mixin/decorate your.product.optiondefinition with the.btnand.btn-primarymixins where theming of.btn-primaryis registered in yourvariables.extfile(s)? Why is the world going so mad? Oh, because of no resistance to YAFL, that's right.Tailwind is definitely not what you're calling YAFL. I would suggest you educate yourself and read the motivation behind Adam's reasons for creating Tailwind before you spread your FUD. He covers your exact argument here. You're showing your ignorance when you lump Tailwind with Bootstrap, Foundation, etc.
While I agree with you 100%, if you are making BaseComponents correctly in a framework like Vue, all of this dirty markup would be locked behind a component, meaning it's easier to access when needed, but actually doesn't dirty up your page templates.
I was totally in the boat of disregarding this (even when I'm a hardcore listener of the creator's podcast), looking at it further though, I realize the benefits. Perhaps I'll give it a try.
Seems pretty useful, but also like it can get... verbose. I could see myself storing those classes in a string variable in React or something, if they got too long or complicated. I guess I'll need to try it out myself.
I can tell you one thing, I don't like the way Style Components and others do the scoped styles. It feels clunky.
Vue has a nice way of doing it, with the tag, and you just writing plain CSS. Wish that was possible in React. Maybe it is and I just haven't discovered the library for it.
I love the way vue handle styling within the same component also wish that was possible with React.
Can you point me to some documentation or example of what you mean by that? I am coming from an angular side and a quick google did not reveal what you both meant.
vuejs.org/v2/guide/single-file-com...
I love tailwind! It meshes well with front end component architecture, while embracing css instead of hiding it inside JavaScript. I actually learned a lot about css by reading the tailwind docs, which is more than I can say for other css frameworks (looking at you bootstrap). Thanks for sharing this great introduction!
I totally agree with you on this! :)
I've been using tailwindcss for the last few months and can honestly say it's my favourite css 'framework' so far. Having everything available for creating apps from the ground up straight out of the box, including all the media queries and variants like focus/hover etc.
Tailwindcss was recently updated which came with quite a few changes for stuff like colours and key names - worth checking out this if you stumble across any older tutorials for tailwindcss and are wondering why stuff isn't working when using the latest version :)
Also, due to the vast amount of utilities and variations, out of the box Tailwind is pretty large, 58.8kb gzipped compared to Bootstrap's 22.7kb or Bulma's 23kb. There's a guide here for controlling file size. I've used purgecss with my Vue apps and have had great results with reducing file size for production (just make sure it's only enabled for production, otherwise every time you're hot reloading in a development environment you'll need to rebuild the whole thing which can take a little bit of time)
Hey Rick! I know right I love it too. I also saw the recent update and tried out a few things.
Also on the part of controlling sizes, I used purgecss while testing it out and it reduces it to less than 3kb which is pretty awesome.
So now that it's 2020, how are you liking Tailwind?
I still love it. I use across multiple projects atm 💛