Has anyone created a react library that is well maintained with the tailwind framework?
twin is a babel macro that supports integrating tw util classes with css-in-js libs like emotion
thanks.
TailwindCSS v2.0
181–190 of 474 posts
Re: TailwindCSS v2.0
#182Tailwind is great, my main issue when I used it was that I felt restricted by the limited set of sizes. I wish it was possible to use e.g. "m-7px".
Tailwind out of the box is a bunch of really good defaults, but it won't suit all designs, but the essence of tailwind is how it builds it's classes and you can quite easily make your own combinations. See https://tailwindcss.com/docs/customizing-spacing
Re: TailwindCSS v2.0
#183For someone who really wants to learn CSS from scratch, is it a bad idea that I start learning CSS by using tailwind? I am mostly a backend dev and trying to learn UI dev since I need it for some side projects.
Depending on how much time and effort you want to invest, learning how something works will always be more useful than learning how to use it.
Re: TailwindCSS v2.0
#184Framework author here! Don't miss the new landing page, it is probably the part I was most excited to share :) https://tailwindcss.com/ Crazy amount of effort went into building all of these interactive examples, so proud of how it turned out. The trailer in the blog post is absolutely 100% a joke in case it's not obvious. The music was scored for us by a friend, and that's a real life professional opera singer at th…
This landing page is the slickest demonstration I've seen of anything in programming
Re: TailwindCSS v2.0
#185I don't do front end dev, and haven't for a very long time, but can someone help me understand how this doesn't lead to inflexible hard to maintain soup? Just to take colours, for a moment. Ordinarily I might define semantic classes, let's say "primary-nav" or "prominent-action" and apply them to relevant things (and use relative selectors for things inside them, etc.). So if I want to change the colour of all promin…
> can someone help me understand how this doesn't lead to inflexible hard to maintain soup?
It most likely does, but it's not old and popular enough for people to have accumulated enough technical debt within systems built with it.
Re: TailwindCSS v2.0
#186Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I've worked with. I know the general sentiment towards Tailwind is "I spent years getting my separation of concerns with HTML/CSS down, but now you're telling me all that is backwards and CSS Zen Garden is blasphemy?" I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I've come…
I was in the same boat. It felt super wrong. It felt like the long, slow nightmare of maintaining an early Boostrap site all over again. But I got peer-pressured into trying it on a medium-sized project and yep: I'm in love. I'm in camp Utility Classes now. The only serious issue I had was when implementing designs provided by an outside designer: 1. The design says this width needs to be 28 px 2. That'd be "w-7", wh…
Every designer I've met loves consistency and design systems, but I've found that most design tools are too limited to cover the cases you are discuss. Figma can make a library of colors/fonts, but it doesn't have anything to enforce spacing constraints. It's very possible your designer would have been happy with w-6 or w-8, but their design tool didn't give them that feedback loop, so they pushed ahead with 28px.
I've been curious what a "Tailwind Linter" plugin for Figma would look like....
And when you watch Adam's screencasts, you'll see him take a design which has some "custom" pixel values and then use his judgement to snap it to a built in size.
Re: TailwindCSS v2.0
#187For someone who really wants to learn CSS from scratch, is it a bad idea that I start learning CSS by using tailwind? I am mostly a backend dev and trying to learn UI dev since I need it for some side projects.
My developer co-workers and I have talked about teaching our designers how to code with Tailwind. The designers have no experience with writing code, but I still think its a good idea to start with Tailwind because you'll use many of the best practices and avoid a lot of the historic madness in the CSS world.
Re: TailwindCSS v2.0
#188"Incompatibility with IE11, so you can tell the man upstairs 'sorry boss it's out of my hands, blame Tailwind'..." I know it's said tongue-in-cheek, but popular frameworks taking this stance is valuable when convincing clients, leaders, authority, etc. to not require IE support. I've consulted on dozens of front-end projects, and showing the stance of "industry leaders" is the most convincing argument.
I would have thought that the most convincing argument would be that the company that made the software has deprecated the software and no longer supports it. However, it's not always the user's decision, and they are forced to use IE due to a corporate IT decision to lock down the users from allowing software installs (understandably).
I've used a product for doing webcasts that 90% of the users were on IE11. The training was for nurses using hospital provided computers that are locked down by their IT staff (for good reasons). These poor users are forced to use the default browser that came with the OS. Every single issue that the users had was from someone using IE. Some hospitals finally relented and deployed Chrome for the users doing the webcast.
Re: TailwindCSS v2.0
#189Earlier quoted context omitted.
Ok, so I could mark everything as "brand-dark" and then change the definition of that in the CSS? Mmm. Ok. How about layout and sizing? A lot of that looks a lot more defined - I'll pick a random example from their own homepage then: "border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 px-4 sm:mx-0 sm:px-0" - if I wanted to change my approach to centring, justification, and sizing, it…
Layout tends to be a property of a particular component, and semantic classes don't work well there either. In a complicated codebase with multiple devs, the number of times you could confidently make a "one-place-CSS-change" to a semantic layout class is very small. It's likely that in one place or another, some dev made an assumption about your `sub-container` class or whatever, which causes your change to break th…
but my Cards are design components, they don't have semantic classes. How is ctrl+f "border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 px-4 sm:mx-0 sm:px-0" better than changing .myCard__title{}?
Re: TailwindCSS v2.0
#190"Incompatibility with IE11, so you can tell the man upstairs 'sorry boss it's out of my hands, blame Tailwind'..." I know it's said tongue-in-cheek, but popular frameworks taking this stance is valuable when convincing clients, leaders, authority, etc. to not require IE support. I've consulted on dozens of front-end projects, and showing the stance of "industry leaders" is the most convincing argument.
This depends completely on the industry. Maybe a dev tools startup etc. would accept the Industry Leader argument, but Retail for example would never pass up the revenue opportunity by dropping IE11 support. I've always appreciated when libraries who drop IE11 support provide polyfills etc., or at least some notes on it, since the library author knows better than anyone which corners are not IE11 compatible. This eas…
Good news is v1.9 supports IE11 and is pretty damn good already. A lot of the updates here are just default config options for tailwind, that you can add yourself to mimic 2.0