TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

TailwindCSS v2.0

927 pointsby sarathywebover 4 years ago

75 comments

seancolemanover 4 years ago
Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I&#x27;ve worked with.<p>I know the general sentiment towards Tailwind is &quot;I spent years getting my separation of concerns with HTML&#x2F;CSS down, but now you&#x27;re telling me all that is backwards and CSS Zen Garden is blasphemy?&quot; I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I&#x27;ve come to trust my intuition. After watching several videos, and reading all the canonical articles on Tailwind, I still wasn&#x27;t convinced this was anything more than a fad full of bad practices.<p>But the one thing I&#x27;ll let trump my intuition is curiosity. So I used Tailwind on a medium-sized project for a couple months and was blown away by the productivity and maintainability. It took using it for a couple weeks to &quot;get it&quot;. I had a positive ROI on this project, even considering the learning curve!<p>If you still think &quot;Tailwind feels wrong, what am I missing?&quot; I&#x27;d suggest reflecting on the following:<p>1) You probably haven&#x27;t actually delved into Tailwind on a non-trivial project. I understand learning a new framework isn&#x27;t a trivial undertaking, but it&#x27;s the only thing standing in your way of discovering your &quot;truth&quot;.<p>2) If you feel Tailwind is too much like inline styles, think of the difference between the infinite possibilities of strings defining a &quot;type&quot; vs. a discrete enum type. Tailwind classes are the enum type values.<p>3) If you&#x27;re struggling to abstract reusable higher-level classes&#x2F;components, the problem might actually be with inconsistent and non-modular design, not CSS tooling. If every page or section is a &quot;unique work of art&quot; then you may have poor UX&#x2F;design.
评论 #25143378 未加载
评论 #25143371 未加载
评论 #25142254 未加载
评论 #25143551 未加载
评论 #25142024 未加载
评论 #25147543 未加载
评论 #25142357 未加载
评论 #25142979 未加载
评论 #25147611 未加载
评论 #25146446 未加载
评论 #25148932 未加载
评论 #25147518 未加载
评论 #25144086 未加载
评论 #25142440 未加载
评论 #25145580 未加载
评论 #25149072 未加载
评论 #25142271 未加载
评论 #25143064 未加载
评论 #25146245 未加载
adamwathanover 4 years ago
Framework author here! Don&#x27;t miss the new landing page, it is probably the part I was most excited to share :)<p><a href="https:&#x2F;&#x2F;tailwindcss.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tailwindcss.com&#x2F;</a><p>Crazy amount of effort went into building all of these interactive examples, so proud of how it turned out.<p>The trailer in the blog post is absolutely 100% a joke in case it&#x27;s not obvious. The music was scored for us by a friend, and that&#x27;s a real life professional opera singer at the end chanting &quot;utility first&quot; in Latin. It&#x27;s completely absurd and absolutely outrageous, just laugh at it :)
评论 #25144634 未加载
评论 #25142377 未加载
评论 #25142972 未加载
评论 #25142314 未加载
评论 #25146314 未加载
评论 #25142659 未加载
评论 #25143333 未加载
评论 #25143461 未加载
评论 #25144341 未加载
评论 #25142292 未加载
评论 #25147784 未加载
评论 #25142211 未加载
评论 #25147925 未加载
评论 #25143087 未加载
评论 #25146438 未加载
评论 #25142906 未加载
评论 #25143786 未加载
评论 #25146064 未加载
评论 #25142263 未加载
评论 #25145652 未加载
评论 #25169369 未加载
评论 #25143933 未加载
评论 #25142909 未加载
评论 #25142375 未加载
评论 #25142243 未加载
lemonberryover 4 years ago
The things I love the most about TailwindCSS:<p>1. After purged the CSS file is really, really small.<p>2. Hopping into all of my projects and not having to remember new class names.<p>3. Not having to come up with new class names.<p>4. Not worrying about making a change in a class and having unintended consequences.<p>5. Not skipping back and forth between HTML or CSS files.<p>That said, if you don&#x27;t dig it, there are plenty of other great frameworks, naming conventions and approaches that people use. Or start from scratch and roll your own.<p>For frameworks I flirted with InuitCSS for a bit. It&#x27;s pretty nice and after digging through the code I realized it&#x27;s not as complex as it first appears.<p>I also like Andy Bell&#x27;s approach with Cube CSS.
评论 #25142008 未加载
评论 #25141875 未加载
kolektivover 4 years ago
I don&#x27;t do front end dev, and haven&#x27;t for a very long time, but can someone help me understand how this doesn&#x27;t lead to inflexible hard to maintain soup? Just to take colours, for a moment. Ordinarily I might define semantic classes, let&#x27;s say &quot;primary-nav&quot; or &quot;prominent-action&quot; 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 prominent-actions across my web app, I just do it in one place. This seems to be demo-ing adding a particular colour class to everything I want to be that colour. So... If I change my mind, what now? I have to find all those places and change the applied class? Search and replace?<p>This seems like the literal opposite of the clean separation I always understood to be the point of styling being separate to markup...
评论 #25142541 未加载
评论 #25145279 未加载
评论 #25142673 未加载
评论 #25142110 未加载
评论 #25143290 未加载
评论 #25144688 未加载
评论 #25142134 未加载
评论 #25142946 未加载
seancolemanover 4 years ago
&quot;Incompatibility with IE11, so you can tell the man upstairs &#x27;sorry boss it&#x27;s out of my hands, blame Tailwind&#x27;...&quot;<p>I know it&#x27;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&#x27;ve consulted on dozens of front-end projects, and showing the stance of &quot;industry leaders&quot; is the most convincing argument.
评论 #25141625 未加载
评论 #25141933 未加载
评论 #25142553 未加载
评论 #25142685 未加载
评论 #25141897 未加载
leemcalillyover 4 years ago
What often gets missed in the tailwind debate is how it forces you to use a design system. When you’re writing CSS by hand it can quickly get out of control when you need to bump something up or down, left or right by a notch. If you add padding it should be related to font size, line-height, etc on some sort of cohesive, harmonious scale. By using a Tailwind class of py-2 rather than writing a CSS class you can be confident that the change will fit with the design system as a whole. This is much better for most people than creating your own design system from scratch every time you need to make a web page. Once your design starts to solidify, just extract out common components like “button” out of the html using @apply.
timdorrover 4 years ago
For those complaining about dense HTML using Tailwind, the headline feature of 2.0 should be @apply for everything: <a href="https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;functions-and-directives#apply" rel="nofollow">https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;functions-and-directives#apply</a><p>It lets you move all of those excessive class attributes into your CSS, where it realistically belongs. And that makes your CSS look a little more like CSS. But you get guard rails on it by applying a known set of properties to each rule. It&#x27;s really the best of all worlds.
评论 #25141922 未加载
评论 #25143997 未加载
评论 #25142075 未加载
评论 #25141889 未加载
评论 #25141426 未加载
whalesaladover 4 years ago
I&#x27;ve been writing CSS since the beginning of the web2.0 days and so it was really hard for me to adjust to the Tailwind approach. It&#x27;s by no means perfect, but after working almost exclusively with it (and Tailwind UI) I am a big believer. I find myself wanting all the utilities almost immediately as soon as I am back on any other project&#x2F;codebase.
评论 #25143151 未加载
cosmoticover 4 years ago
Tailwind smells like using a style attribute but with properties that are fewer characters. It&#x27;s fully embracing what everyone said to avoid. What am I missing?
评论 #25141637 未加载
评论 #25142113 未加载
评论 #25143927 未加载
评论 #25141576 未加载
评论 #25143400 未加载
评论 #25141696 未加载
评论 #25141740 未加载
评论 #25142427 未加载
评论 #25142365 未加载
Wolfr_over 4 years ago
Their marketing is good, they do a primo job at conveying the message in a nice looking way, but the end result is still HTML littered with hundreds classes, that gets hard to maintain and impossible to refactor.
评论 #25141208 未加载
评论 #25141663 未加载
Kiroover 4 years ago
I used to a skeptic, to the point where I thought it was completely ridiculous. Then I realized that I was over-using inline styles anyway since I was always afraid of messing with old CSS. I was adding layers of overwrites just not to accidentally change something unrelated.<p>Now I can&#x27;t imagine myself ever writing regular CSS again. I just love how I can look at the HTML and instantly &quot;visualize&quot; how the component will look just by seeing the classes. No more mysterious cascades where it&#x27;s hard to pinpoint where the styling is coming from. It makes iteration so fast and responsive design has never been easier.
withinrafaelover 4 years ago
I use TailwindCSS for some personal projects, works great, no major complaints. But as a dev in the government sector, I&#x27;m disappointed in the way they just whimsically dump Internet Explorer 11 in their release notes [1], as if it&#x27;s a minor thing &#x2F; cool to hate on.<p>In my bubble, there&#x27;s no alternative right now. Switching to a more modern browser requires an enormous amount of agility throughout the pipeline that does not exist. To adopt a shiny new browser, agencies would need to push browser updates to all their client machines every ~4-6 weeks [2]. Solution providers need to perform continuous testing on their web apps (browser vendors do not guarantee minor updates are backwards compatible), creating patches, which need to be submitted to the government for regression testing... and oops that took too long and the next EOL is here.<p>With Microsoft&#x27;s surprise obsolescence of Internet Explorer 11 across all its cloud offerings 1Q 2021, we&#x27;re headed straight into a brick wall. Very interested to see what shakes out here.<p>I suspect initially we&#x27;ll see the government just deploy and use older unsupported copies of Chrome&#x2F;Edge browser, under the guise of &quot;well it&#x27;s better than IE11 right?&quot;. Longer term, ...?<p>[1] <a href="https:&#x2F;&#x2F;blog.tailwindcss.com&#x2F;tailwindcss-v2#incompatibility-with-ie11" rel="nofollow">https:&#x2F;&#x2F;blog.tailwindcss.com&#x2F;tailwindcss-v2#incompatibility-...</a><p>[2] Vendors do not support these versions after EOL for any reason. Firefox has an ESR branch, bless them, but some agencies have now increased scrutiny of Mozilla software for recent political&#x2F;security reasons.
评论 #25143817 未加载
评论 #25142961 未加载
评论 #25143001 未加载
评论 #25143928 未加载
评论 #25159837 未加载
评论 #25143864 未加载
评论 #25144607 未加载
评论 #25143477 未加载
systemvoltageover 4 years ago
I&#x27;ve gone through the following phases:<p>1. Write old school circa 2008 CSS.<p>2. Oh shit, it&#x27;s a real pain in the ass to do layout and make a responsive grid. Let me use a framework. Sweet!<p>3. Hmm.. its kinda painful to write css selectors all day long. They&#x27;re reusable but I am having to get out of comfy JS IDE setup to go change some CSS properties in a different file.<p>4. Tailwind arrives. OMG. This is awesome! Never have to leave the context. Just stack properties as you like and compose your components!<p>5. HTML looks completely unreadable. It&#x27;s a goddamn mess.<p>6. I want to go back to 2005. No frameworks. Just write non-responsive CSS, one for each screen (yeah, you read that right. I don&#x27;t want to compromise the layout for responsiveness. I&#x27;d rather handcraft one for each device size give or take a few pixels). Custom crafted like a piece of fine art. CSS grid&#x2F;layout is a lot better with css grid and flexbox. Things have improves since the 960-grid days. No frameworks at all and its fucking liberating.<p>Edit: I currently use reset&#x2F;reboot css to clean up default rendering + sass (only use variables + mixins). I am happy like a daisy.
评论 #25141365 未加载
评论 #25141613 未加载
评论 #25141303 未加载
评论 #25141847 未加载
评论 #25141419 未加载
评论 #25141472 未加载
评论 #25141291 未加载
评论 #25142270 未加载
评论 #25141635 未加载
评论 #25141539 未加载
Bishonen88over 4 years ago
Looked into tailwind 2-3 times and simply couldn&#x27;t see the appeal. Working on analytical-dashboards in react, I mostly end up writing css straight in js using material-ui&#x27;s makestyles. There&#x27;s only so many components to style before I start reusing them and the css needed to make something &#x27;not-look-too-crappy&#x27; is actually quite low.<p>Now after learning all the css basics, I&#x27;d have to learn yet another &#x27;system&#x27; again? I think I&#x27;ll pass.<p>On the other hand if I&#x27;d be constantly restyling webpages with hundreds of different components etc., I might consider it again...
评论 #25143153 未加载
dstaleyover 4 years ago
I&#x27;ve seen some incredible things built with Tailwinds, but it still hasn&#x27;t clicked for me. It seems like you&#x27;re learning a completely different language for styling and layout. I also have some gripes with optimization in that the suggested solution to eliminating unused CSS is to use a tool that finds classes in HTML files, which is a pretty rudimentary way to accomplish that. (However, I&#x27;m sure in more advanced codebases, particularly JavaScript ones, there&#x27;s probably a better utility to use.)
have_faithover 4 years ago
What kind of projects do people use Tailwind for? and what&#x27;s the general role of the person using it? I haven&#x27;t found a use for it myself as a predominantly front-end dev but I&#x27;ve met a few devs who like it a lot but found that they were generally less comfortable writing plain css without a framework. No shade towards Tailwind intended, just not a paradigm I&#x27;ve gotten on board with yet and trying to understand.
评论 #25141338 未加载
评论 #25141363 未加载
评论 #25141422 未加载
评论 #25141349 未加载
评论 #25141872 未加载
评论 #25141609 未加载
dinklebergover 4 years ago
I think tailwind is the first thing I’ve ever realized I’m a hipster about. I’ve been using it since early on and bought tailwind UI the instant it came out. I love it.<p>But now that’s it’s super popular I can’t help but wish it was still a quite little secret. Every other product hunt or show hn seems to be using tailwind with all the default configurations so they all have the tailwind look, just as every new startup used to have the bootstrap look.<p>And there are so many tailwind UI knockoffs and tailwind tutorials out there it is insane.<p>I’m super happy for Adam and all the success he and the team are having. Tailwind is a truly great library and now ecosystem.
benfrainover 4 years ago
Forgive me if this comes across condescending or patronising. Genuinely not my intent...<p>So many people reach for a solution without really understanding their own problem.<p>I&#x27;m talking specifically about maintainable code. And maintainable CSS code at that.<p>For scaling CSS imagine a continuum with complete isolation one end (BEM, ECSS et al) and complete abstraction at the other (started with &#x27;Atomic CSS&#x27;, which then spawned countless others including Tailwind).<p>My experience is that either end of that continuum leads to an approach that can scale well and be maintainable. Mixing of approaches is where people come unstuck because they don&#x27;t understand why that is problematic.<p>Understanding that fundamental (more here: <a href="https:&#x2F;&#x2F;css-tricks.com&#x2F;scaling-css-two-sides-of-a-spectrum&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-tricks.com&#x2F;scaling-css-two-sides-of-a-spectrum&#x2F;</a>) goes a long way to dealing with the problem.<p>My preference is isolation (which I detailed at <a href="https:&#x2F;&#x2F;ecss.io" rel="nofollow">https:&#x2F;&#x2F;ecss.io</a> and in the book &#x27;Enduring CSS&#x27; about 5 years back — not mentioned to pimp myself, I don&#x27;t give a hoot if you buy&#x2F;read)). I like code that is easy to reason about and delete (I like deleting code far more than writing it!) and that suits my mental model.<p>I also believe our job as a front-end developer is to accommodate designs, not turn around and say, &quot;sorry, we don&#x27;t have a class for 8px margin, it will have to be 5px or 10px&quot;. I&#x27;m not suggesting this or that framework can&#x27;t accommodate this need, just highlighting why I feel the way I do and choose the solution I do.<p>Think about how __you__ want to build and maintain code. Don&#x27;t just jump on something because everyone else does. Analyse your problem. Where are your actual pain points. Find the solution to your own issues. Otherwise you&#x27;ll just swap one set of problems for another.<p>A framework may very well meet your needs. And by all means listen to others extolling its virtues but that will not save you from a lack of due diligence!<p>[ends attempting to dispense fatherly advice]
CapriciousCptlover 4 years ago
&gt; Incompatibility with IE11, so you can tell the man upstairs &quot;sorry boss it&#x27;s out of my hands, blame Tailwind&quot;<p>For those who don&#x27;t know, IE11 is the last major release of IE. Between a major frontend framework feeling confident dropping IE, and Apple dropping Intel it kind of feels like the end of an era.
评论 #25141272 未加载
评论 #25141880 未加载
omnimusover 4 years ago
So the biggest advantage of tailwind in my opinion is that it enforces some structure in CSS. I work on small, highly custom designed&#x2F;branded websites (like marketing product sites) often times with bunch of freelancers of differing skill levels that i might have never worked with before. We also often pass the site to someone else to maintain and upgrade after its finished. For my usecase Tailwind has been simply revelation.<p>If you look at CSS methodologies like BEM, ITCSS, CubeCSS they require developers to learn them and be very disciplined to follow them. These methodologies are probably very effective in orgs where employees work long term. In my case it&#x27;s always just matter of time before they start to break down. It just takes too much time to onboard devs.<p>Maybe it&#x27;s not so much about Tailwind being better or the &quot;right way&quot; but about it making very clear how you should structure CSS (put it in html and tailwind.cofing). Other frameworks like bootstrap also enforced something but Tailwind is not UI kit. It infinitely more customizable it can have any look.<p>Tailwind creates less technical debt? Maybe that&#x27;s how to describe it? For others it will be the exact opossite.
rikkipittover 4 years ago
Can&#x27;t wait to upgrade to v2.0. I&#x27;ve used Tailwind CSS&#x2F;UI very extensively over the last year or more. The time I&#x27;ve saved in my day to day client dev work is incredible. Some of my notable recent projects using the framework include:<p><a href="https:&#x2F;&#x2F;www.hawking.org.uk" rel="nofollow">https:&#x2F;&#x2F;www.hawking.org.uk</a> (Adam Wathan often uses it as an example of how different sites built in Tailwind can look - <a href="https:&#x2F;&#x2F;twitter.com&#x2F;adamwathan&#x2F;status&#x2F;1298932488769875968" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;adamwathan&#x2F;status&#x2F;1298932488769875968</a>)<p><a href="https:&#x2F;&#x2F;www.paced.email" rel="nofollow">https:&#x2F;&#x2F;www.paced.email</a> (While a bit more Tailwind-esque, the framework has allowed me to concentrate on functionality while knowing the product will look great in the end).<p>Happy the TailwindLabs team is getting the exposure they deserve. Congratulations folks. Thank you for the awesome tools!
gidanover 4 years ago
While it may seems like a great idea, I just finished a project for a client on Tailwind.<p>First of all it&#x27;s not free, to use UI components it would cost many hundreds of dollars.<p>But maybe cost is not an issue for all, on the other hand productivity might be.<p>I found myself terribly less productive, having many classes like:<p><pre><code> &lt;div class=&quot;mt-8 mx-4 flex flex-col items-center font-medium text-base ...&quot; </code></pre> it&#x27;s very hard to add or remove a rule compared to CSS where each rule is on it&#x27;s own line.<p>Also some pretty significant issue for me was hot-reloading taking a lot of time, whereas in CSS you can just refresh linked stylesheet, with tailwind you need to reload complete page, and if your page is hosted on a Django&#x2F;Symfony&#x2F;RoR application in development mode, you better have to be patient at each CSS modification !
评论 #25149941 未加载
Wolfr_over 4 years ago
I don&#x27;t get why Tailwind is so hot. Do any of you actually maintain large custom design systems?<p>Where the same system is used across multiple code bases, with varying components, where you need to be able to accurately replace the look of a component, that might be coded in multiple dev environments (Angular, PHP, React...)?<p>If so, you would be running away from this approach fast. BEM&#x2F;ITCSS all the way. How would you globally replace something that is marked up like this (example appears somewhere else in this thread)? How would you assert what this code means across projects?<p><pre><code> class=&quot;text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10&quot; </code></pre> With BEM&#x2F;ITCSS, you would have a custom namespace like `auk`:<p><pre><code> class=&quot;auk-btn auk-btn--primary&quot; </code></pre> And you can reason about it, maybe in project 2 it is<p><pre><code> class=&quot;auk2-btn auk2-btn--primary&quot; </code></pre> So now you can refactor the old buttons out to replace the new buttons. Good luck with the mess above.<p>If people say: you can use `@apply`. Yeah. If you write your whole stylesheet in `@apply` logic, why are you using Tailwind at all?<p>Design tokens and the re-use of design variables is not a Tailwind thing by the way. Some people seem to be acting like it is. We&#x27;ve had variables in Sass for over since 2009. People have been doing clever things with variable maps (arrays) in Sass since forever. There&#x27;s no way Tailwind can take credit for this.<p>I&#x27;ve written extensively about why Tailwind is problematic:<p>(1) <a href="https:&#x2F;&#x2F;johanronsse.be&#x2F;2019&#x2F;11&#x2F;11&#x2F;thoughts-on-tailwind-css&#x2F;" rel="nofollow">https:&#x2F;&#x2F;johanronsse.be&#x2F;2019&#x2F;11&#x2F;11&#x2F;thoughts-on-tailwind-css&#x2F;</a><p>(2) <a href="https:&#x2F;&#x2F;johanronsse.be&#x2F;2020&#x2F;07&#x2F;08&#x2F;why-youll-probably-regret-using-tailwind&#x2F;" rel="nofollow">https:&#x2F;&#x2F;johanronsse.be&#x2F;2020&#x2F;07&#x2F;08&#x2F;why-youll-probably-regret-...</a><p>(3) <a href="https:&#x2F;&#x2F;johanronsse.be&#x2F;2020&#x2F;08&#x2F;20&#x2F;hey-your-api-surface-is-causing-unnecessary-complexity&#x2F;" rel="nofollow">https:&#x2F;&#x2F;johanronsse.be&#x2F;2020&#x2F;08&#x2F;20&#x2F;hey-your-api-surface-is-ca...</a><p>Don&#x27;t fall for it! The marketing is sweet but the choice will hurt you in the end.
评论 #25144673 未加载
评论 #25144661 未加载
citronsover 4 years ago
I took over a fairly large project which used tailwind v1. Have a low-hate relationship with it.<p>I like how fast you can do stuff, but when when a designer creates something a bit custom it all falls part really quick.<p>I understand it solve the issue with reusability and style-guides, but for modern apps that would also mean everything should already be react componentized, so you shoudl not really care about css at that point idealy.<p>I rather use a mix styled-components (easily extendable if you need something custom) and css-variables for dark mode and defining global variables like colors,paddings etc. Plus I route-split so page only has it&#x27;s related styles.
评论 #25147601 未加载
评论 #25147460 未加载
aarondfover 4 years ago
Geeze, this homepage is truly world-class. Props to the Tailwind team!
评论 #25141212 未加载
treelovinhippieover 4 years ago
Re: bloated HTML. Has anyone built a vscode extension that can toggle the style classes on&#x2F;off?<p>Would also be cool to hover on a HTML block and see it highlighted in a browser hot-reload view.
DominikDover 4 years ago
I used to like web development some 15 years ago. Ever since frameworks became a thing, I stopped doing any web development. I simply couldn&#x27;t get myself to setting up a bunch of tools just to process some byzantine file formats to a usable CSS. It was a really great feeling when I discovered Tailwind. Not only building custom, trimmed stylesheets required a single command, everything about using it just clicked. Kudos to people behind it!
评论 #25142300 未加载
sam_goodyover 4 years ago
1. Tailwind is awesome.<p>2. I hate the new website, sorry. The old one was clean, focused and clearly portrayed what TW does. The new one is IMHO big, loud, and a lot less focused.<p>3. I have had endless issues compiling with npm[1], and am using yarn just because of tailwind. Anyone else with this issue?<p>4. 30 minutes to upgrade is a lot when you manage thirty sites. Though if it is not worth it, no one is forcing me to upgrade.<p>5. There are some really awesome tools out there that complement tailwind, like tail-animista.vercel.app and tailwind.ink, and some collections like bestoftailwind.com.<p>6. tailwindui is really nice, and gives the best of both worlds compared to something like uikit.<p>Partly I feel that the creation of tailwindui took the wind out of the sails of sites like tailwindcomponents.com (of which there are quite a few) which is a shame, since a community can do more than even a dedicated team.<p>But partly I wish they would filter, organize and promote all the neat tools that there are on tailwindui.<p>[1]: <a href="https:&#x2F;&#x2F;github.com&#x2F;tailwindlabs&#x2F;tailwindcss&#x2F;discussions&#x2F;1891" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;tailwindlabs&#x2F;tailwindcss&#x2F;discussions&#x2F;1891</a>
评论 #25144290 未加载
Taigover 4 years ago
I&#x27;m quite interested in frontend technology and enjoy to take a look at announcements like these. But at the same time my knowledge about JavaScript is extremely limited. So just out of curiosity:<p>Why is the theme fontSize defined as<p><pre><code> xs: [&#x27;0.75rem&#x27;, { lineHeight: &#x27;1rem&#x27; }] </code></pre> rather than something like<p><pre><code> xs: { size: &#x27;0.75rem&#x27;, lineHeight: &#x27;1rem&#x27; } ?</code></pre>
pythonistover 4 years ago
Tailwind released 2.0, but it is a result of constant work releasing new versions gradually and listening to the users. This is a very active project and it is good to keep an eye on new things <a href="https:&#x2F;&#x2F;newreleases.io&#x2F;npm&#x2F;tailwindcss" rel="nofollow">https:&#x2F;&#x2F;newreleases.io&#x2F;npm&#x2F;tailwindcss</a>. Actually, 2.0.1 is out already. :)
kumarvvrover 4 years ago
For those using libraries &#x2F; frameworks like React &#x2F; Angular &#x2F; Vue &#x2F; Blazor &#x2F; Etc. just try Tailwind. It&#x27;s awesome and fits very well with component based UI systems.<p>You will have a slight learning curve, but I recommend you try to learn the classes, style your components <i>without looking at the docs</i> for a week or so, and believe me, your productivity will shoot up, and most importantly, you will start <i>thinking</i> in terms of <i>design, look &amp; feel</i>, rather than how do I encapsulate this in css class.
mixmastamykover 4 years ago
&gt; Extra wide 2XL breakpoint, for designing at 1536px and above<p>Is it still common for folks to use pixels in their CSS? I moved to em and the rest around 1999 (I think). What is the reason to stick to pixels?
评论 #25141404 未加载
评论 #25141377 未加载
评论 #25142224 未加载
评论 #25141423 未加载
评论 #25141380 未加载
bkeatingover 4 years ago
Tailwind and utility-first in general is a major win in my book if for one thing only; I don’t have to think about naming my elements at the html level at the start.<p>Huge speed increase that gives me immediate results. You can absolutely spot and define those names, but you don’t have to think of them up front, allowing you to move forward more abstractly. Readability and maintainability <i>seem</i> like an inefficient nightmare but so far I have felt no pain or burden.<p>Hats off to the Tailwind team. This is the way.
Wumpover 4 years ago
For anyone who&#x27;s interested, I put together a repos to bootstrap a react with typescript and tailwind project.<p>It&#x27;s intentionally fairly barebones, but I&#x27;ve found it useful to get a wide variety of projects started quickly: <a href="https:&#x2F;&#x2F;github.com&#x2F;figelwump&#x2F;react-typescript-tailwind-bootstrap" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;figelwump&#x2F;react-typescript-tailwind-boots...</a><p>I&#x27;ve come to love Tailwind, after a few failed attempts at using it. Recommend trying it!
habosaover 4 years ago
These look like great improvements! I&#x27;ve been using Tailwind one a medium-large solo project and I can confidently say the whole project is MUCH better designed than it would have been without Tailwind, while still looking very custom.<p>Tailwind is not the one true way to do CSS, but it saves me from myself. I think of Tailwind vs Regular CSS how I think about TypeScript vs Regular JS. I <i>could</i> do everything and more in JS, but I&#x27;d make so many more mistakes along the way.
jms55over 4 years ago
I&#x27;ve been using tailwind for a chess game (<a href="https:&#x2F;&#x2F;github.com&#x2F;JMS55&#x2F;chessmatch" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;JMS55&#x2F;chessmatch</a>) and so far it&#x27;s been really good, and the first time CSS has clicked for me. My only complaint is that the html templates can get kind of messy, but that can probably be solved with @apply or splitting the template into pieces.
bredrenover 4 years ago
Can anyone comment on the current state of React Bootstrap versus Tailwind?<p>There was a relatively recent React Round Up episode where people seemed unconvinced on tailwind: <a href="https:&#x2F;&#x2F;podcast.app&#x2F;rru-react-tools-codebase-management-and-more-with-brice-ayres-e101838552&#x2F;?utm_source=ios&amp;utm_medium=share" rel="nofollow">https:&#x2F;&#x2F;podcast.app&#x2F;rru-react-tools-codebase-management-and-...</a>
syamilmjover 4 years ago
We’ll have an entirely new generatiom of front-end developers who don’t know anything about CSS beyond some arbitrary class names soon.
jaredcwhiteover 4 years ago
This isn&#x27;t how you HTML, people! <a href="https:&#x2F;&#x2F;threadreaderapp.com&#x2F;thread&#x2F;1329156451416244224.html" rel="nofollow">https:&#x2F;&#x2F;threadreaderapp.com&#x2F;thread&#x2F;1329156451416244224.html</a><p>I don’t have too many programming hills to die on, but taking full advantage of the glory that is HTML5 is one of them. Tailwind is…the opposite of that!
评论 #25142959 未加载
评论 #25142223 未加载
gsvclassover 4 years ago
I switched from tahyons to tailwinds like 3 years ago and been using it every since on all my React projects. I have tried all the CSS-in-JS stuff etc nothing compares to the dev speed with Tailwinds. Checkout <a href="https:&#x2F;&#x2F;42papers.com" rel="nofollow">https:&#x2F;&#x2F;42papers.com</a> it&#x27;s all tailwinds and has a darkmode too.
LVBover 4 years ago
I occasionally write HTML&#x2F;CSS, and have always just grabbed Bootstrap, Pure, something. I&#x27;ve briefly looked at TailwindCSS a couple of times and always end up at: where are the some of the common, basic components? It seems like those are paid for items. Am I on the hook to be e.g. a button designer if I don&#x27;t buy the bundle?
sandGorgonover 4 years ago
It is still very hard to get it to work with React Native mobile apps. I wish there was an official compatibility package.
sasha_fishterover 4 years ago
Incredible work by Adam and team. I&#x27;m using Tailwind from beginning and I have so used to it that I&#x27;m not even thinking to go back to whatever Bootstrap, Bulma, etc. It&#x27;s such a joy to work with TW. Once you try to tinker around with Tailwind there is no back, trust me.
ghego1over 4 years ago
Tailwind 2.0 palette color might be the sexiest on the interwebs, now featuring 50 shades of gray.
ebbflowgoover 4 years ago
Love seeing a promo video on a stylesheet library.. expect to see more marketing on open source
spdyover 4 years ago
Probably the best invention i added to my tool belt for a long time.<p>Never was i able to move so quickly to style components in a way that works and you only have to learn one set of keywords. Reminds me a little bit of vim learn once apply everywhere :).<p>Props to the creators of tailwind !
k__over 4 years ago
Half-OT: Are there good UI toolkits out there based on Tailwind?<p>I read it is really flexible, but I don&#x27;t want to start from zero. Most of the time I want to throw some pre-made UI components together and then sprinkel them with customizations when required.
评论 #25141628 未加载
评论 #25141599 未加载
holtwickover 4 years ago
CSS&#x2F;Stylus framework inspired by Tailwind, trying to respect the content semantics <a href="https:&#x2F;&#x2F;github.com&#x2F;holtwick&#x2F;windy-css" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;holtwick&#x2F;windy-css</a>
rutierutover 4 years ago
I really think writing component-scoped and BEM named CSS with Tailwind is the sweet spot here.<p>For example:<p><pre><code> .menu { @apply w-full h-12 bg-gray-100 flex flex-row items-center; &amp;__icon{ @apply h-8 w-8 object-fit; } }</code></pre>
Brajeshwarover 4 years ago
This is an awesome news. Thanks to the team at Tailwind.<p>I migrated a big-ish project to TailwindCSS about a year and a half. I like it for the fact that I can train juniors to be productive and part of the big project quickly while the experienced developers can graduate to using it as a utility for their styles.<p>For those worrying about not being able to work on the type scales, etc. I would suggest trying to use Tailwind as your utility and write your own SCSS.<p>Try this out for your Styles.<p>1. Includes Tailwind CSS.<p>2. Create separate components for repeatedly used set of Tailwind classes. See examples at <a href="https:&#x2F;&#x2F;github.com&#x2F;valinorearth&#x2F;valinor.earth&#x2F;tree&#x2F;master&#x2F;src&#x2F;css" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;valinorearth&#x2F;valinor.earth&#x2F;tree&#x2F;master&#x2F;sr...</a><p>This is our Startup&#x27;s website built in the open. A bit overkill but was our attempt to do a multi-lingual Static Site with 11ty + Tailwind + AWS s3 + Cloudfront + Github Actions&#x2F;CI and other interesting toolsets.<p>For instance,<p><pre><code> .button { @apply inline-block py-2 px-4; @apply no-underline bg-water-600 text-white; @apply border border-water-600 rounded; @apply transition duration-100 ease-in-out transform; @apply leading-tight; } </code></pre> For any number of team-size, I suggest maintaining design-tokens in the Tailwind Config. Of course, do post-process your styles with the likes of PostCSS — postcss-import, autoprefixer, etc.<p>For those asking for simpler CSS&#x2F;Styles, I believe Tailwind might not be the right one for you. I don’t really write codes these days (quite a few years actually) but I tend to do a lot of marketing landing pages, brochures-types for prospective customers, and throw-away prototypes.<p>These days, I like the plethora of classless CSS available for me to choose from. I might have even created one for our internal use based off the NordTheme color palette (will try extending it with TailWind). Here are some of them for you to start off - <a href="https:&#x2F;&#x2F;github.com&#x2F;dbohdan&#x2F;classless-css" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dbohdan&#x2F;classless-css</a><p>I have come back full circle and now just write in plain CSS for the marketing pages. I was once a purist and started with tools such as Hotdog Professional, Ultradev as an IDE.<p>Tools such as Tailwind has their places and we are standardizing it for all of our websites, customer dashboard, admin, etc. Check out the Tailwind’s own TailwindUI at <a href="https:&#x2F;&#x2F;tailwindui.com" rel="nofollow">https:&#x2F;&#x2F;tailwindui.com</a>
abatiloover 4 years ago
Does anyone know how this affects TailwindUI? The paid parts of Tailwind?
kd22over 4 years ago
For someone who really wants to learn CSS from scratch, is it a bad idea that I start learning CSS by using tailwind?<p>I am mostly a backend dev and trying to learn UI dev since I need it for some side projects.
评论 #25142682 未加载
评论 #25142647 未加载
brunoqcover 4 years ago
Any great alternative to material-ui? It&#x27;s going to be open core and will make us pay for &quot;advanced enterprise features&quot; like a date range picker.
muhammadusmanover 4 years ago
Wow, the homepage for Tailwind has me excited to try this. I haven&#x27;t seriously considered using a full on UI framework since early Bootstrap versions :)
RivieraKidover 4 years ago
Tailwind 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. &quot;m-7px&quot;.
评论 #25142635 未加载
评论 #25141665 未加载
评论 #25153828 未加载
评论 #25145082 未加载
lxeover 4 years ago
TailwindCSS is great but I wish it didn&#x27;t require custom postcss build pipeline. You can use the prebuilt css file, but it lacks some features.
评论 #25141438 未加载
thr0w337over 4 years ago
Anyone using the paid Tailwind? Is it worth the price?
zerubeusover 4 years ago
This project is really amazing, so much love
Exumaover 4 years ago
Tailwind is the best &quot;css framework&quot; ive ever used in my entire history of web design &#x2F; programming.
mehrzadover 4 years ago
Using `yarn upgrade tailwindcss` only brought me up to 1.9.6. I had to specify the version to get it to upgrade.
评论 #25141368 未加载
gitgudover 4 years ago
I like the new addition of css grids, transforms and gradients. Now my projects will have literally ZERO css!!
joshspankitover 4 years ago
I mean, that’s a damn impressive video. In the moment I totally want to throw out all other CSS and dive in.
herunanover 4 years ago
I don’t understand a lot of the hate here claiming messy HTML. Partials and @apply and it’s all sparkling.
viviansolideover 4 years ago
Is the upgrade enough big to go major?
darkhorse13over 4 years ago
Always have been a huge fan of Tailwind CSS just for the amount of passion that is clearly behind it. The whole utility-only approach is not for me - I prefer a middle ground with utilities and pre-built component classes. Although I am also building a CSS framework, I can only wish them the best of luck. This update looks freaking amazing!<p>Edit: Removed link to avoid self-promotion.
misiti3780over 4 years ago
Has anyone created a react library that is well maintained with the tailwind framework?
评论 #25142910 未加载
评论 #25141711 未加载
alphachlorideover 4 years ago
I never envisioned a web dev tool would have trailer music like that lol.
mpcannabravaover 4 years ago
Lol... Incompatibility with IE11 touted as a feature is really good.
takklzover 4 years ago
LOVE tailwind! couldn&#x27;t have build www.outseed.io without it :)
taksintikkover 4 years ago
+1 for the epic battle music in the video trailer.<p>Solid implementation
irrationalover 4 years ago
Does anyone have any thoughts on Tailwind UI?
评论 #25145091 未加载
jcnh74over 4 years ago
that video is quite aggressive.
评论 #25142005 未加载
EasyTiger_over 4 years ago
IE 11 is no longer supported :(
评论 #25141304 未加载
评论 #25141923 未加载
AtOmXpLuSover 4 years ago
Everything in AtOmXpLuS
nelsonenzoover 4 years ago
This is neat. I actually wrote my css similar to this 10 years ago, but was laughed at by &quot;the smart devs&quot;. I&#x27;m glad to see I was right all along.<p>Don&#x27;t let imposter syndrome get you kids, it&#x27;s a hell of waste of time.
评论 #25154160 未加载