Intro
There are few technologies that I fell in love with.
React is one of those, Redux is another, even if I don’t use it as much toda...
For further actions, you may consider blocking this person and/or reporting abuse
I've been using CSS-in-JS libraries (styled components/emotion/Theme-UI) and started learning Tailwind (TW hereafter) only last week.
So far, it seems like it'd be a great fit for "component" level styling.
How are site-wide styling handled with TW? Does it make sense to write the whole site with TW? Or should we leave the global styling to CSS/SASS?
The short answer is you can mix and match, and then with purgecss, clean put your unused classes before putting a project into production. TW is atomic: classes do not need or expect other classes, unlike say bootstrap.
The longer answer is you can handle setting site-wide styling with @apply - see this video.
Thank you, Bob.
That
@applyis a nice directive to apply a global style~Once you configure Tailwind for the basic defaults and you use a component-based framework like React, almost nothing is "global".
You may have a Header component, a Button component, a TextInput component... what's global? 😊
Thank you, Matteo. So long as each component is responsive, then it's a matter of composing each component :)
I think it's a well-founded fear, though. I don't personally like Tailwind or Bootstrap. They make it very overwhelming to parse what would otherwise be a very simple, legible chunk of markup. I can remember most of the CSS attributes and values I work with frequently. I would need to keep a reference sheet on hand, or study Tailwind's API, to remember most of their class names.
I think Steve Schoger is a brilliant designer/UI dev, though. Some of his UI tips have helped me make noticeable improvements to my own site.
If you start using Tailwind, you'll see that in no time you'll remember almost all of the syntax.
Now for me it's much simpler to remeber
justify-betweenthanjustify-content: space-between;.As for the legibility, when you work with components, as with React, you encapsulate the "many class complexity" in the component: outside of it you just see
<HeroUnit title="..." />In my current project I've been doing just what Tailwind is all about: creating name-effective utility classes that can be applied to a broad array of elements without a second thought. It might be too late now to introduce Tailwind to this project but I'll have it in mind for future ones. Thanks for bringing it to my attention.
Always pleased to hear someone being happier by using a new tool!
I've never used Tailwind- just read that people are generally happy with it.
Noob question here, what's the difference between Tailwind and Bootstrap 4? I love the utility classes it comes with and, for what I've read, seem very similar to those in Tailwind's
Tailwind is not opinionated, so you never have to "undo" default styles of the framework. It is designed to be customized and the responsive variants (
screen-size:prefix) are excellent to build great responsive interfaces quicklyI'm using Tailwind for the first time in my current project with Vue.js (and Laravel) and I love it!
I can confirm all the things you mentioned; I do feel more productive and I think my design is much better with Tailwind (primarly used Bootstrap before).
However, I think Bootstrap and Bulma may be easier to setup and start with for people who aren't that much into JS or coding and just want to write HTML+CSS. You do need at least some basic experience in JS, npm, node modules to start with TailwindCSS and set it up right (with other postcss plugins, purgecss, build process,...).
Sorry for the naive question, I haven't really checked Tailwind out, but I've heard good things about it. How do you override CSS though? My use case would be having a base CSS for English, and have overrides for other languages.
no need to override, you want left border to be 2 px and orange with some padding and gray background, also text should be orange as well?
<div class="border-solid border-l-2 border-orange-500 px-6 py-4 bg-gray-200 text-orange-500">some content or message</div>that's it, there is nothing to override here
I've tried it but I don't like to see a website full of atomic classes🤷🏼♂️... The HTML gets ugly with a lot of classes... Or I'm missing something?
To keep HTML beautiful usually ugliness is hidden in the CSS :)
Really:
1) You get used to read Tailwind classes
2) With React, I hide this class names inside React components: every component is small and the final JSX ("HTML") is very clean
You can 'store' the classes in an object : example -->
const style = {
card:['max-w-sm rounded overflow-hidden shadow-lg content-center mx-auto'],
}
return(
div className={style.card}
)
Thank you for the kind words! 😊