Shadcn-ui variation without Tailwind

[bryandandan]

Hello everyone,

I've been exploring the shadcn-ui package and I must say, it's quite promising. However, I have a query regarding its dependency on Tailwind CSS. Is there any plan in the pipeline to release a version of shadcn-ui that doesn't rely on Tailwind? Alternatively, will it remain exclusively Tailwind-centric in its design approach?

From a personal perspective, I find Tailwind CSS a bit restrictive, and I prefer the flexibility of customizing components with regular CSS, akin to the approach taken by Ant Design. Moreover, in organizational settings, heavy reliance on Tailwind can sometimes lead to cluttered codebases, making components harder to comprehend, read, and maintain.

I believe offering an option to utilize regular CSS for customization alongside or instead of Tailwind would greatly enhance the appeal and versatility of shadcn-ui, catering to a broader range of preferences and use cases.

Looking forward to hearing your thoughts on this matter.

[xirclebox]

Yes, please.

[keisanng]

Is there any? I'll make one if there's none.

[jimbrig]

What's the word?

[gaurangrshah]

Might be possible I mean i believe the underlying radix-ui library works with plan css right? If i'm not mistaken should be doable.

[sergio9929]

The Radix documentation gives examples with both CSS and Tailwind.

[qwalker8408]

I have begun a starter template using css modules and next.js.

Its nothing fancy as shadcn has but personally I feel this could work quite well. https://github.com/qwalker8408/shadcn-css

The big limiting factor is documentation wont be publicly available but I want to instead have a page (shadcn) that has all the components, its basically the same as the section of all the preview tabs on shadcn's website for each component, and the developer can just copy and paste that section from the code into a page they're creating.

I appreciate any ones thoughts on this and hopefully some help. I'm finishing up on making sure the page that houses all the components is as smooth as butter. Alot of extra styling is applied apart from the components itself, not to mention animation.

for the love of css :)

[SalahAdDin]

It looks pretty nice. SO, you make it yourself manually, right?

Only miss to make the components SSR first.

[qwalker8408]

I mean shadcn explicitly calls "use client" on each of his components he's created so I'm not sure how SSR ties in, but I do have limited knowledge as to how to render the css from the server. Follow the way next.js handles css modules. https://nextjs.org/docs/app/building-your-application/styling/css-modules

[Gn3po4g]

Or I think it would be nice too if using shadcn/ui with UnoCSS.

[qwalker8408]

I honestly think that unoCSS is a well formed framework of what shadcn/css or even shadcn/ui is already trying to achieve. css modules is very powerful, tied in with "class-variance-authority" plugin makes a very compelling scenario for people out there, like myself, who have a passion for css but make their living through js.

[eliyamelamed1]

shadcn with css modules is a must !

[qwalker8408]

its not perfect in any way, however its a good start and most of the components are there except for the new graphs component. this can also be used in a normal react project with vite

https://github.com/qwalker8408/shadcn-css

[SalahAdDin]

@qwalker8408 how is it going on?

[qwalker8408]

@qwalker8408 how is it going on?

still outstanding, keen to help ? Push a PR please. I'm also going to try create a home page for the components some time soon :)

[prince-hope1975]

This is amazing
IS there a way to use it the same way we use shadcn by just using a command.
Is It something that can be worked on, or in the talks

[qwalker8408]

This is amazing IS there a way to use it the same way we use shadcn by just using a command. Is It something that can be worked on, or in the talks

For me, priority is to fix the snags that are still present and iron them out, update with the graph component and then to work on a landing page for the repo with examples loaded onto vercel. I'm also porting these components as a library to react-native and using styled components as its basis. I'm not sure how the CLI will work Prince, its not really my cup of tea.

[halfong]

Second you! Shadcn's components are cool.
But I just using my tiny stylesheets and do not want to make it complex with TailwindCSS.
Looking forward for a headless ( or with straightforward styles) version!

[michaelparkadze]

Am willing to contribute to start this going!

[smithgeek]

I was just playing around with a way to abstract out all the styling information and came up with a proposal that would also allow defining a style that could use css modules instead of tailwind. Might be crazy, but it's in this discussion if you want to take a look.
#5767

[dclstn]

Tailwind is the only thing stopping me from using shadcn, would love to see this happen.

[SalahAdDin]

Same. I prever not to use hype frameworks like tailwind. In a couple of years it's outdated and will be a mess to update and maintain it. Plain css modules are always usable and easy to maintain.

but not that performative.

[eliyamelamed1]

the majority of devs are already used to CSS, Less, or SCSS, so it’s super easy to maintain and get new folks on board

[loktar00]

Same here :( would love to use it but don't want to include tailwind.

[federicopiaggio]

Same here

[dderose]

Agreed. Tailwind is particularly egregious garbage that should cease to exist as soon as possible. It's basically just fancy BEM without the benefit of being in-house code, and we moved on from that nearly a decade ago because there are better solutions.

[eliyamelamed1]

Hello everyone,

I've been exploring the shadcn-ui package and I must say, it's quite promising. However, I have a query regarding its dependency on Tailwind CSS. Is there any plan in the pipeline to release a version of shadcn-ui that doesn't rely on Tailwind? Alternatively, will it remain exclusively Tailwind-centric in its design approach?

From a personal perspective, I find Tailwind CSS a bit restrictive, and I prefer the flexibility of customizing components with regular CSS, akin to the approach taken by Ant Design. Moreover, in organizational settings, heavy reliance on Tailwind can sometimes lead to cluttered codebases, making components harder to comprehend, read, and maintain.

I believe offering an option to utilize regular CSS for customization alongside or instead of Tailwind would greatly enhance the appeal and versatility of shadcn-ui, catering to a broader range of preferences and use cases.

Looking forward to hearing your thoughts on this matter.

Ten months have already passed does anyone know if this is going to be scheduled or at least considered?

[Emil-babayan]

Tailwind is pure cancer. Incurable. So, yes, please, let this be.

[huboh]

I love shadcn and still haven't tried it yet because i f...in hate tailwind. i prefer to write my styles in plain css or scss modules

[Christophvh]

Shadcn in essence is Radix-UI + tailwind. So just use Radix-UI if you don't want tailwind.

[ilarramendi]

No, the propossed idea is subsituting tailwind with plain css, not just removing it.

[ilarramendi]

+1 to this, i can help if anyone is interested in starting this project

[juanpablob]

It seems this has not been picked up anyone? :(

[SalahAdDin]

its not perfect in any way, however its a good start and most of the components are there except for the new graphs component. this can also be used in a normal react project with vite

https://github.com/qwalker8408/shadcn-css

You have this, but it seems to be frozen.

[StephaneAdeso]

I recently started an Electron application. I loved Shadcn's approach to customizing my components. As soon as I went to install it, I saw that Tailwind was mandatory. I've never liked these frameworks for many reasons that I won't name. But I still decided to give it a try. I went to the Tailwind documentation and started following the installation instructions. On the second line I already had problems. I found that Tailwind and StyleLint are not supported. If you want linter you have to install a Prettier plugin. I also use Esbuild directly in my project for reasons that are too long to explain, but there is no documentation or plugins to work with ESbuild. I also kept looking and saw that in the recently released version 4 they changed a lot of things. When I install Tailwind it no longer creates a configuration file for me. It may be my mistake, but I don't believe it, and the init command no longer works. In the end I don't know if I should configure postcss or not... I could go on telling you about my experience. 90% of the documentation and posts on stackoverflow no longer apply to the new version of Tailwind. Apparently, Tailwind is easy to install when it's for a framework, but as soon as you get out of that, it becomes quite tedious. I'll just say that I didn't know Tailwind, and right now I hate it with all my heart. I'll try to use radix components with pure css to see if I don't have too much difficulty.

[plettj]

The dependency on Tailwind is the only thing stopping my office from switching to shadcn/ui right now; besides Tailwind, it looks perfect.

It's been a year of this discussion remaining popular, I would love a word from @shadcn on whether a regular-CSS version is in the roadmap.

[ilarramendi]

For the moment I just copy the code of the component and pass it to Claude, and ask it to transform it to css modules and tell me all css variables used, it normally does the trick and works as expected, I'm thinking about doing this for all components and deploying them as a public shadcn Registry but I didn't have the time yet.

[paulm17]

shadcn-ui that doesn't rely on Tailwind

Yeah. It's called mantine: https://mantine.dev/

You all should give it a look. More components, hooks and other features.

A like for like between Mantine and ShadCN is not even comparable. It's night and day.

[ilarramendi]

Totally different approach, shadcn/ui prioritizes full ownership of code (copy and paste approach) while Mantine uses a more traditional component library model (import from package).

[mr-scrpt]

Will there be any comments from the developers? Tailwind is a very controversial thing and to nail your beautiful library to a very controversial library is very frustrating @shadcn

[Phebonacci]

I'm about to start a project that requires shadcn/ui, and I'm absolutely worried because of TailwindCSS. I don't like the clutter that is TailwindCSS. Any plans to support other styling engines @shadcn ?

[robbiecren07]

I'm currently working on a side project, it's a converter tool with a CLI which will convert the tailwind to css modules.

[bryandandan]

@qwalker8408 started a project a while back. Worth a check. How's the progress on yours @robbiecren07 ?

[robbiecren07]

I'll have to take a look at this project.

For mine, I'd say the progress is pretty good. It's built out into 2 separate packages a Converter and CLI. The converter would mainly be managed by maintainers. I only need to solve for 6 more components (the big complex ones like calendar, chart, etc). The CLI has a few more things to add/tweak, it will work the same way as shadcn's cli, with an init and add command. So i'd say in a week or two ill be wrapping it up and doing testing on all the install scenarios and test all the components making sure the styles match, etc. The last peace would be to probably make a simple web app with instructions, easily get cli commands for components and reference shadcn where needed.

After initial release, I will work on solving tailwind vars. Currently the module css still uses the tailwind vars. Then ill probably add the ability to select css or scss and provide the module scss with simple nested classes.

[ilarramendi]

Given that we have a relatively small number of components dosnt it make more sense to just let claude transform the shadcn tailwind code to semantically correct classnames + css or css modules one time than making a whole CLI? or do you plan to use this for custom registries too?

[robbiecren07]

Well there is probably lots of ways to go about this. For me personally I didnt want to use AI as I wanted to make this a learning experience for myself but at the same time solve a problem for devs that want to use Shadcn but cant/dont want to use Tailwind. Everything im building is going to be open source and the converter will have done all the heavy lifting. The user will only need to use the CLI to install the components, just like they do with shadcn. So like npx shad-css init and then npx shad-css add button and it will handle everything, it will work the same as shadcn/ui's CLI.

I was first planning to just do a PR into the shadcn/ui repo but I didn't really want to spend the time building it out to work with their code and then have the PR sit and never get released. So figured if I build this and it gets traction, then approach shadcn with a way to integrate it into their codebase/cli.

[airtonix]

The effort isn't worth the maintenance cost tbh.

I think you're underestimating the time-saving, consistency that tailwind brings to the table.

Questions you need to answer in any shadcn owned solution will be:

• Tailwind opposition: why? is this just ideological or is fact driven.
• Tailwind brings economy of scale to managing approaches to common css problems:
  • How are you going to provide equivalents to this economy of scale so that writing shadcn components can remain as tailwind class names?
  • How will your proposal address how tailwind 4 manages breakpoints, container queries, groups, etc?

I can't imagine @shadcn wants to be maintaining n+1 flavours of the month.

[mujaji]

If you already have an established style layer that isn't using Tailwind, to your point, the effort isn't worth the maintenance cost. I think that's what everyone on this thread is saying