Tailwind or Chakra?
I'm creating a simple app and I'm curious what most people are using for styling. Is Chakra using it under the hood? I'm reluctantly willing to learn some css shit.
22 Replies
if youre in this discord the answer is gunna be tailwind
but thats cause youre asking in this discord where its literally setup for you by the stack that was created here
i have not used chakra but i really like tailwind
it doesnt mean you dont have to learn css
its literally just shorthand for css
(+ they make a few desicisions for you regarding what css properties are available to you by default)
but in a way thats a good thing because most libraries that try to hide css for you will end up with tons of janky bits where because theyre trying to build on top of janky css
by using tailwind you can still google / chatgpt all your css issues
its just so much faster
(and better performance that CSS in JS in react by default because strings are automatically memoized)
I'll give tailwind a try. I've mainly used component libraries. But I might as well give it a go.
I see most of the components are locked down are their any good free ones? I see hyperui for example.
Tailwind and chakra are different. Tailwind helps you write css. Chakra gives you prebuilt components that you import and use.
I'm slowly getting that. I initially thought it was like sass or something.
thanks Tom3 and dan.
np
Unknown Userβ’15mo ago
Message Not Public
Sign In & Join Server To View
@TheJhonny tailwind all the way
use radix ui, headless ui, tailwind ui, etc
If you want to design yourself or have control over every styling, then go for tailwind. Else I think Chakra would be good because it will give you already styled components so all you will have to do is get data from the backend and just flush them in the chakra components.
Personally, if I don't want to do the front-end styling, but care more about the functionality of the website and work on the backend. Ill go with chakra as it would let me focus more on the backend. If I want to improve my front-end skills. Ill use tailwind or normal css or sass.
Chakra also have their own Chakra UI figma kit so you can create a finalized look of what you want to make without doing any designing but just dragging and dropping existing figma stiles given to you by chakra.
Interesting. I'll still give tailwind a go.
Definitely agree with most of the comments here, chakra has been really good for building quick small apps where I donβt really care about the styles. Iβve been using tailwind more recently for a bigger project though and the end result can look much better, it just takes a bit longer to get there.
chakra = super quick, fairly rigid, decent looking components
tailwind = very not-rigid, looks as good as you make it look, super quick if you know css, though it does help you learn css as you go and you get quick fast
There are sites helping you with the component code when using Tailwind like https://flowbite.com/docs/components/accordion/ or https://ui.shadcn.com/docs/primitives/accordion
Tailwind CSS Accordion - Flowbite
Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options
Accordion
A vertically stacked set of interactive headings that each reveal an associated section of content.
If you might ever start using the app directory once it becomes stable, I would not use chakra, as it depends on Emotion. https://github.com/emotion-js/emotion/issues/2928
GitHub
Plans to support Next.js 13 - /app directory Β· Issue #2928 Β· emotio...
The problem Next JS just release their v13 publicly. As seen in their docs, emotion has not yet added support. Is there any plan to add support in the near future? Thanks.
I'm using this now. It looks pretty good and easy enough to make into a react component. I've dropped chakra.
honestly if u actually have no plan to learn how to design/css then its totally reasonable to use a prebuilt library, it all depends if u know one really well , since that will probably make u faster at finishing work than doing the whole styling from the start.
like i personally use mantine for all internal stuff i do , if its public i switch to tailwind where i can be more precise with my styling.
hope this mindset helps
like.. doing a responsive dashboard from the start is not an easy task
if ur goal is to learn that then go right ahead
Tailwind Elements
Tailwind Elements - 500+ free Tailwind CSS components
A free collection of open source UI components, templates, sections & plugins for Tailwind CSS. Features dark mode and theming customization options.
I should be better at css, so I'm gonna go on it. At work we have an internal component library so I can get away with not using css to build a product.
I used to have to deal with lots of css and it was a nightmare trying to figure out where styling was coming from and targeting it. It was not a clean app.
Traumatic
Around four months ago I move away from chakra because it's bundle size. They include framer-motion by default.
And the syntax it's not for me.
how are mantine's bundle sizes? I've used chakra once it was quite nice and customizable but the budle size was enormous.
i'm also curious about shadcn's bundle sizes
In dashboards bundle sizes don't matter
Imo
Ur not getting any marketable benefit with am optimized dashboard
i mean for things that aren't dashboards
like the site itself
I honestly don't know, they have nice caching providers
But I have not performance test it