26 ms·
Catalyst – Tailwind CSS Application UI Kit
- accounter8or 3y agoBeen using Shadcn this week, definitely like the component concept and this has arrived just in time.
- erulabs 3y agoAs an infrastructure engineer who spends all day in Go and Bash and AWS I gotta say I’m a huge fan of Tailwind. This looks worth buying too. People are blown away by my front end skills, baby I’m just letting Copilot and Tailwind whisper sweet anodyne nothings into my ear. Keep me as far away from design as you can; this helps!
- perfmode 3y agoDo you use Tailwind with Go templates?
- deleted 3y ago[deleted]
- tazu 3y agoNot parent, but I do. Go, SSR, vanilla JS, TailwindUI, SQLite, Litestream got us to $20k MRR for a niche CRM product. TailwindUI provides HTML-only code and includes useful comments about class transitions, so I was able to handle the mobile hamburger menu and some form submission stuff in a tiny JS file, rather than React or Vue (which they also provide code for).
- jonnycoder 3y agoHah same here. Learned enough tailwind to be effective for my personal website. I’m writing a blog article about it. Gpt4 didn’t produce satisfactory layouts so I learned grid-cols and flex, which is useful for groking existing tailwind layouts.
- ldjkfkdsjnv 3y agoChatGPT is an expert at tailwind
- IanCal 3y agoThis is one of the reasons make-real works so surprisingly well: https://github.com/tldraw/make-real https://github.com/tldraw/make-real
- jadbox 3y agoI wish it wasn't tied to React. I'm unsure if this can be used headless?
- atonse 3y agoI bought tailwind UI more than a year ago. The lifetime/unlimited product or whatever it was. It’s generally fine but feels incomplete. Many of the components don’t have any alpine or JS code documented even though the team has clearly built those aspects when building the previews and demos. I’m not sure what the rationale was there but I hope they’ve fixed it here.
- gjsman-1000 3y agoI’ve gotten into the habit of using “Inspect Source” in my browser when copying and pasting, because it tends to have almost fully-built Alpine transitions embedded. Kind of inconvenient and strange.
- jonnycoder 3y agoI paid for DivMagic extension which lets me select elements on a page and it generates tailwind styled html code. It was quite useful for the first month but will probably cancel soon.
- yieldcrv 3y agoCan probably do that with chatgpt-4v now
- atonse 3y agoRight? It’s weird that they don’t just provide the alpine code that they’ve already built. You’ve done the work guys. That’s my only complaint. It’s been good otherwise.
- dimitrios1 3y agoI bought Tailwind UI when it first came out, and have been thrilled. I view it as essentially I paid for a high quality template to build off of. You are still expected to know tailwind, or at least that's how I took it, I am not sure how its advertised now, but I am pretty sure its not advertised as a batteries included OOTB solution, but more as a starting point. From that perspective, I have been pleased.
- memset 3y agoAlso look at Flowbite as an alternative tailwind component library
- leetrout 3y agoFlowbite looks like what tailwind ui should have been. Designers I have worked with want to use flowbite so their figma comps are accurate and i think tailwind ui not having figma assets is a huge drawback.
- nprateem 3y agoYeah 100%. I've been looking for a UI library with figma templates and the choices are: 1. Flowbite 2. ...er Flowbite I'm not a designer, I just want to be able to mock up a UI before I implement it. I guess it's not a priority for other companies so I'll buy Flowbite (in spite of the annoying YouTube thumbnails on their site). Actually preline looks good...
- bruce_one 3y agoWe've had success using Flowbite :-) We're using it with React and occasionally find the docs lacking (and go looking in the component source for the answers), but otherwise have been happy with it, fwiw :-)
- impulser_ 3y agoYou can also check out https://preline.co/ https://preline.co/ Which is basically what Tailwind UI should be. Works with anything.
- ipaddr 3y agoDaisyUI free and complete
- tamimio 3y agoI don’t see a dark mode/theme.
- tap-snap-or-nap 3y agoI can see it on the top right corner.
- hobobaggins 3y agoAm I missing something? It looks like this is incredibly unfinished.
- throwup238 3y agoYou aren't missing anything except that Catalyst is included in the Tailwind UI lifetime license that many HN readers bought years ago so this is likely from an "insider" email campaign, rather than a marketing landing page for a standalone product. It's not meant for general consumption yet.
- hobofan 3y agoYeah, I think the post link should have been their announcement post, which gives some more context: https://tailwindcss.com/blog/introducing-catalyst https://tailwindcss.com/blog/introducing-catalyst
- jmhyer123 3y agoFrom the linked docs: > Catalyst v0.1.0 is a development preview with unstable dependencies. So, yeah, it's still a work in progress.
- bdlowery 3y agoYes. You missed the part where it said v0.1.0
- brutalized 3y ago[dead]
- brutalized 3y ago[dead]
- replwoacause 3y agoHate that everything needs React these days. I’ll stick to using Tabler and HTMX.
- yieldcrv 3y agohey look everyone, someone that doesn’t need a job or to collaborate with anyone
- hipadev23 3y agoYou have a strange view of how web development works. They can collaborate with others just fine using those or any other tools.
- yieldcrv 3y agoI have a view of how the market for talent works People that aim to be employed do not spend time on things employers are not asking for
- hipadev23 3y agoThat sounds like a surefire way to ensure you'll be a cog for your entire career. Focus on delivering results.
- yieldcrv 3y agohow does that work if you wont be hired without prior experience in a particular stack to begin with for current employment I’ve only ever seen teams push for using the next shiny thing solely to get that experience and professional validation in the current role, to be competitive for consideration in the next roles
- hipadev23 3y agoIt's unfortunately accurate that a lot of roles and people in those roles are indeed purely bullet-point driven for their resumes. If you're entering a role at a mid-level or junior, you're likely stuck with their tech stack choices. At senior or higher, it's usually about delivering results and the tech stack is up to you. I've never paid much attention to specific job requirements, just whether or not I could solve the problems they were looking to solve.
- mortallywounded 3y agoI wish there was a "frameworkless" version. Just include the JS/CSS/Font(s) and paste the html and there you go.
- aembleton 3y agoYou could probably create that by copying the CSS generated in your developer tools
- greatpostman 3y agoI learned so much from using tailwind ui. Could be more extensive but it’s easily paid for itself
- radicalriddler 3y agoThe decision to cough up for the lifetime payment pays off again.
- doix 3y agoSlightly off topic, but has anyone read the license[0]? This point feels really odd to me: > Creating an admin panel tool (like Laravel Nova or ActiveAdmin) that is made available either for sale or for free. I mostly get the other restrictions. You can't buy the kit then repackage it and sell it. But why can't you make an admin panel? [0] https://tailwindui.com/license https://tailwindui.com/license
- dubcanada 3y ago> In simple terms, use Tailwind UI for anything you like as long as it doesn't compete with Tailwind UI. That part I guess explains that. Tailwind UI makes admin panel themes and components so that’s a direct competition.
- deleted 3y ago[deleted]
- rstat1 3y agoIt says "admin panel tool", which given the examples seems to me that the prohibition is not on creating a single purpose admin panel for a specific app.
- christophilus 3y agoI think you can make an admin panel for your own application backend or whatever. You just can’t sell a general purpose admin panel product. At least, that’s my reading of it.
- pcthrowaway 3y agoYeah, creating a postgres admin panel would probably fine. Creating an admin panel for a blogging platform that gives the admin a WYSIWYG-like experience that leverages tailwind ui is probably too close to competition
- vinniepukh 3y agoWhat free alternatives exist other than ShadCN?
- Takennickname 3y agoPrimeVue Flowbite All better. All free. All with figma designs.
- vinniepukh 3y agoThank you <3
- toinewx 3y agoMore competition in the UI components is good. If you are new to the space, you may check Mantine components. They are arguably better and more mature. The reason Mantine is free is because the maintainer is not doing it for quick bucks.
- johnfn 3y ago> The reason Mantine is free is because the maintainer is not doing it for quick bucks. Over time I've found that lack of monetization eventually leads to maintainers leaving the project. Paying money feels like a way to guarantee (to a degree) that the maintainer won't drop the project when their attention turns elsewhere.
- akkartik 3y agoWe have both kinds of projects, the ones that are free so maintainers leave, and the ones that make money and the money warps incentives over time. Rather than free vs paid, I try these days to get a sense for the motivations of the creator, and whether those motivations feel sustainable for something durable. Sometimes they involve money, sometimes not.
- corytheboyd 3y agoOh man, if this is more or less tailwind ui but already turned into thoughtful react components, I’m all in. Tailwind ui has been useful as a reference of a non-trivial implementation of tailwind css that you buy, which is great. Try to drop the examples into a real application and you’ll have a bad time, it just feels like something should exist already… and here it is! Hopefully, anyway, will definitely try it out!
- KyleJune 3y agoYea, before this, I had been creating my own components based on the examples provided. It will be nice to just have premade components, now I won't have to implement all the components myself.
- toinewx 3y agothe probable success of Catalyst will prove once again that people believe that an expensive product is automatically better than free ones.
- impulser_ 3y agoWhy does Tailwind not build framework agnostic UI components? The best thing about Tailwind is everyone can use it. Wish we could go back to the days of building for the web and not building for React.
- wokwokwok 3y agoYes… but that isn’t possible in a meaningful way. Many other UI frameworks such as kendo have tried this and failed, and gone back to variants for each UI framework. Really, if you want meaningful integration with a ui library it has to natively support that library. I mean certainly I would be delighted if they’d figured out a way to do this, but it’s unsurprising they didn’t: it’s just a very very difficult problem to solve, and the only really decent effort at it (web components) has had extremely limited support and enthusiasm from the community, and has some reasonably unsolvable technical limitations. Someone needs to invent a way of doing that that works before you could reasonably expect people to start building frameworks with it.
- mock-possum 3y agoLike say plain old web components?
- EMM_386 3y ago> Why does Tailwind not build framework agnostic UI components? For the same reasons that PrimeFaces has PrimeNg (Angular), PrimeReact, and PrimeVue. Given the way all the different stuff works together, that's the way it has to be done. I'm still amazed they're asking for $299 for this! Prime is MIT licensed. "Here, clone our repo on GitHub and do whatever you want!". Professional support is paid. It looks good, it works, and no, I don't work for them. But $299 for this Tailwind thing seems rather crazy in comparison. There is also PrimeFlex, which lets you do stuff like: <div class="shadow-3 m-3 surface-card text-center p-3 border-round-sm h-6rem w-9rem flex align-items-center justify-content-center font-semibold">shadow-3</div> Which of course looks a lot like working with Tailwind.
- troupo 3y ago> I'm still amazed they're asking for $299 for this! Because building things costs money
- djbusby 3y agoMay also want to see https://daisyui.com/ https://daisyui.com/ A FOSS Tailwind component library
- presbyterian 3y agoAlso Skeleton if you’re using Svelte with Tailwind https://www.skeleton.dev https://www.skeleton.dev
- rishav_sharan 3y agoDaisyUI is the best IMO, as long as you are willing to customize the theming and the rounded-ness. Daisy's default themes don't look that great IMO.
- reddalo 3y agoFrom daisyUI home page: > instead of writing 100 class names, use semantic class names ?!? That defeats the whole purpose of Tailwind, which is not writing any semantic class name. I don't get it.
- tipiirai 3y agoThis is an unbelievably unfinished UI library. Especially with a price tag. A limited set of components with very little attention to detail. For example, the buttons lack the active state completely. Why would I pay €250 for something I can find easily for free?
- ilrwbwrkhv 3y agoThis is unfortunately the whole space around Tailwind and UI kits. Incomplete kits which look the same and are all priced highly. Just look at Catalyst, Shadcn and Radix UI. I don't know what's new in all of this. These are used by "agencies".
- switz 3y agoI’m using parts of Shadcn on a real product making real money. It’s really just a combination of cva, radix, and tailwind that you can copy into your app and customize/extend. Shadcn, radix, and tailwind are all FOSS so they are not “high-priced”. Your analysis is shallow and unfounded.
- ilrwbwrkhv 3y agoI meant they all look very similar. Yes these are indeed free.
- tipiirai 3y agoShadcn seems more polished and complete than Catalyst, and it's free. Absolutely no reason to pay for Catalyst. btw: is the active state missing from Tailwind since Shadcd buttons are also missing them?
- tczMUFlmoNk 3y ago> btw: is the active state missing from Tailwind since Shadcd buttons are also missing them? Nope. Tailwind has good support for styling the active state, in the way that you'd expect if you've used Tailwind: e.g., `bg-red-500 hover:bg-red-600 active:bg-red-700`. https://tailwindcss.com/docs/hover-focus-and-other-states https://tailwindcss.com/docs/hover-focus-and-other-states
- deleted 3y ago[deleted]
- flakes 3y agoI had to double take this, because I use a very different web framework also called Catalyst http://catalyst.perl.org/ http://catalyst.perl.org/ Perl in all its glory and horror.
- boundlessdreamz 3y agoHaven't checked out Catalyst but I have used TailwindUI. The components are really good but if you are not using a JS framework, it's a lot of work to integrate. The regular JS version of TailwindUI uses Alpine which doesn't have a CSP compatible version so you will have to write the Javascript from scratch. Partially due to these and frustrated by lack of component libraries in Rails, I built and recently released a UI kit for Rails - https://zestui.com https://zestui.com Built with Phlex, styled with Tailwind with custom built Stimulus controllers. It's got - 25 themes - Dark Mode - Form Builder - Icons - Built in Flash Toast - The components are responsive or have specific mobile views - All the JS needed (Stimulus controllers) is wired up automatically Phlex is a game changer. It is simple, powerful, intuitive and performant. I will never ever write a component as a partial/ViewComponent again. A short video (50 seconds) showing it off: https://youtu.be/OQmDZddLtR8 https://youtu.be/OQmDZddLtR8
- __float 3y agoThis is neat! It'd be nice if clicking the blurred background area on a Sheet closed the sheet like the x button does.
- boundlessdreamz 3y agoThat is planned as an option.i.e the developer decides whether to offer that. Some don't like it because accidental clicks close the sheet/modal which can confuse non tech savvy users.
- reactordev 3y agoI think we are well past the curve on the diffusion of innovation chart on this feature. It’s expected behavior that if a modal is focused and the background is blurred that clicking on the background will close the modal (or initiate close). You can see this for yourself by using a heat-map of your users mouse movement and positioning. Note how many try to close with clicking the background.
- 3y ago
- ihuman 3y agoThe name is a bit confusing. I thought it was related to Apple's Catalyst and UIKit
- jonahx 3y agoI am so confused. Tailwind UI is a set of prebuilt components for building applications. And catalyst is built from those but is also a "template" which is also an "application UI Kit" which is what I thought Tailwind UI was....
- bbor 3y agoYeah the link posted here as if it’s the home page might be confusing people: this is one of many templates, which happens to be for people looking to publish their web application, as opposed to their other templates like blogs, marketing pages, SaaS pages, etc If you click around the site, you can see that “components” are separate from (and comprise) the templates
- whalesalad 3y agohttps://flowbite.com/ https://flowbite.com/ is free and supports Vue too :)
- hallefsantos 3y agothis is awesome btw :-)
- lucasyvas 3y agoUnfortunately, I'm going to have to dunk on the irony of developing a CSS-first toolkit then only releasing headless React components. At least if you used Svelte or WebComponents directly you could compile them down to bind to other frameworks. I'm not a React hater, but it's time for React-only support for UI toolkits to end. There are other compelling frameworks that are also worth using that are better choices in many cases.
- tsp 3y agoI’m disappointed they went with React as well. There are definitely more innovative frameworks (my favorites: Vue and Svelte). But I do understand the Tailwind team - it is an economic decision. React (still) dominates. Going framework-agnostic is (currently) not a good approach imo. The developer experience would suffer too much. I hope in the future agnostic UI kits become a thing, but the tooling around this approach needs to change first.
- holoduke 3y agoWhy would you ever pay for a UI kit on the web. I am not gonna name things, but you dont need to spend a dime on any framework. Most if not all popular ones are opensource. Use those ones. Makes your life much easier. Community arround them also a lot bigger.
- sb8244 3y agoThe design kits that tailwind provides have been so useful compared to everything else. The difference in quality (that I've noticed) is significant when compared to free alternatives. Tailwind full access is such an easy sell for me. Plus it's pay once, so I don't mind it at all.
- mirzap 3y agoThere are better open source libraries available, such as Shadcn, which offers real components and Figma design, among many others. https://ui.shadcn.com/ https://ui.shadcn.com/
- deleted 3y ago[deleted]
- troupo 3y ago> Why would you ever pay for a UI kit on the web. Once you've tried to implement one yourself, and looked at how much time and effort it is, you will understand
- andruby 3y agoThe time I would spend just thinking about how to structure things is more expensive than paying the one time fee for tailwind ui. I think it’s great value amd have already gotten a multiple out of it.
- leftnode 3y agoI paid for it because I love what Adam and team are doing with Tailwind. It's been incredibly beneficial to use as a backend engineer, and the amount of money paid is trivial to the benefits it provides.
- jfdi 3y ago<3 tailwind
- jurip 3y agoIt's cool how it uses the same name as the technology used for porting UIKit applications to macOS, which I'm sure will make search engine usage very fun if it ever gains any traction.
- andruby 3y agoWhat's with all the negativity here on HN, especially about the pricing? The Tailwind team created one of the most used CSS frameworks ever and charge nothing for it. The framework needs a revenue stream to enable continued investment. Rails has basecamp. Bootstrap had twitter. React has meta. Tailwind has Tailwind UI. I find it great value. It's a one-off cost comparable to hiring a designer or front-end developer for a day, and you get a bunch of usable components + future upgrades. Usually HN isn't as negative about revenue streams for open-source developers.
- deleted 3y ago[deleted]
- deleted 3y ago[deleted]
- tipiirai 3y agoI think it's the surprisingly poor quality of Catalyst compared to their other products and also how limited it is considering the price.
- deleted 3y ago[deleted]
- mokkol 3y agoThis is an extra thing on top of everything they made. I praise them for not adding any extra costs. It is never enough for some people. They have a one off price for so much stuff. Absolutely no brainer for a lot of people.
- dsissitka 3y ago> This is an extra thing on top of everything they made. I praise them for not adding any extra costs. Only if you're an all access customer. Otherwise it's $149. I like the Tailwind folks but $149 for Catalyst in its current state is a bit steep.
- jensenbox 3y agoCan I use it with just plain HTML? I would love the marketing site to look just like the application if at all possible.
- jwr 3y agoI would gladly pay this price as a monthly subscription, if only I could get a maintained CSS library that lets me build applications on a level similar to Semantic UI, with the ability to customize or theme components. I don't want JavaScript, I don't want a "framework", I don't want an npm-installable-monster, I want something that produces CSS that I can use for business. Semantic UI was close, but it got abandoned, and the forks do not go in the right direction. Also, I need information-dense design, not whitespace-dominated design. Some of us build complex apps that display a lot of information and need tightly packed UI. This is not hypothetical: I really do need to replace Semantic UI with something that is maintained and will work better on mobile screens. At a quick glance, my code has several thousand places where Semantic UI tags are used. If somebody picked up Semantic UI, started maintaining it without turning it into a JavaScript framework, and offered a $249/month subscription, I'd pick it up.
- dz0ny 3y agoNice start, but Flowbite has all the blocks an states described.
- AmazingTurtle 3y agoFlowbite also charges money for some blocks. Plus: they need "flowbite js" for the blocks to work. It's a plugin for tailwind. Nah
- JasonSage 3y agoThere's something I genuinely don't understand in discussions of price, which is that folks seem to want to ignore basic economics. Something is either worth it to you or it's not. If it is worth it, and you want it, you may buy it. If it's not, then you don't buy it. The world keeps spinning. The Tailwind folks seem to think this may be worth $150 to some people. Those people might buy it. If you think it's not worth that, it doesn't mean that those people are wrong, it means that you 1) don't understand the value or 2) the value just doesn't exist for you, and it's not for you. Or maybe people do understand the economics of it, but there's something psychological that's more pressing: because one person doesn't find value, and sees another person that does find value, they must defend or justify their own value assessment and confront the opposition. I'm sure there's a name for this, but I don't know it off-hand.
- MrDresden 3y agoRelevant to your point, this is a simple tool that takes the user through the evaluation of the financial value of their time. I have used this on occasion to figure out where it makes the most sense for me to exchange money for services. https://programs.clearerthinking.org/what_is_your_time_really_worth_to_you.html https://programs.clearerthinking.org/what_is_your_time_reall...
- herunan 3y agoAwesome rec! This is the kind of thing I never knew I needed but where suddenly I ask myself where was it all this time. Thank you.
- tipiirai 3y agoThis is not a general discussion about price. This is about Catalyst and whether it has a good price/quality ratio. I don't think it has. How about you?
- JasonSage 3y agoI think you're mistaking quality as a proxy for determining value to the purchaser. It might be low quality, and still absolutely worth $150 to folks who buy it. Even if you can be 100% objective on quality, the only way to make any kind of sweeping price/quality assessment is to compare it to other things on the market. What do other things in this price range give you? What do similar quality products cost? This is where I see some valuable comparisons actually being made in this context. > I don't think it has. How about you? I just can't see how this adds to the discussion at all in light of the above. It reads like "this isn't worth $150 to me" and I just think, ok, it's not for you. /shrug
- Popeyes 3y agoTailwind Templates are the new Wordpress themes.
- radel 3y agoCannot be unseen: radio buttons are not symmetrical (chrome 120 on ubuntu)
- kookamamie 3y agoThe dark themed combo-boxes are broken in terms of the item visibility. Only the active/selected item is readable, the rest are using a font color matching the background of the item box.
- jonathanreinink 3y agoHey thanks for the heads up on this — fixed!
- ShoneRL 3y agoI feel like this doesn't belong on the front page, not really trying to be negative here but it's a quite sloppy UI kit for something I don't like (Tailwind, after extensive research & some usage).
- leftnode 3y agoI instantly purchased this. I really love Tailwind and the component/UI libraries they sell. I'm shocked that a CSS library/framework is so divisive. If you don't like it, don't use it! I'm also surprised that someone ... selling something ... gets such negativity on Hacker News of all places. Again, if you don't like it or it doesn't have value to you, don't buy it!
- sam_goody 3y agoPaid TailwindUI user here. I understand Tailwind's decision to choose a framework, but it is not good for us, and I suspect will not age well. I have a non React site, and including React for a button makes no sense. All the new stuff they are developing are not worth my even looking at. I feel they built themselves up while doing everything in Vanilla, then for a period the sponsored and promoted Alpine as being their style, then in Headless moved to React + Vue, and now have abandoned that. They've forgotten how much of the world wants to use Tailwind but won't use React.
- moooo99 3y agoI've been a long time user of tailwind UI and bought the all in bundle two years ago. Especially with the education discount I was eligible back then (thank you to the creators for that!) the purchase was an absolute no-brainer for me. However, with this specific template, I really don't get the economics. This appears to be the least finished template they have in their repository, yet it is the most expensive as a single purchase.
- smnm 3y agoIn 'Live preview' I casually inspected the the first button, and it has 63 classes, wow <button class="relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText] border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay] dark:after:-inset-px dark:after:rounded-lg before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)] dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] cursor-default" type="button" data-headlessui-state="">Button<span class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden" aria-hidden="true"></span></button>