DEV Community

ashish
ashish

Posted on

What tools/frameworks do you use for styling you web app?

One of the most important part of a web app is a good looking and working front end. There are a lot of ways to style your web app from using vanilla CSS to using CSS frameworks like bootstrap or Tailwind or using UI frameworks and component frameworks like Chakra UI, Material UI, Mantine and so on.

I personally use vanilla CSS, Tailwind CSS, chakra UI and Mantine in my projects depending on what I want to achieve. For simple projects, I like using vanilla CSS, but for more complex projects with different UI components I like using Chakra UI, Mantine or Tailwind.

So, what are the tools or frameworks you use for styling your web apps? Let me know in the comments below! 😀

Discussion (56)

Collapse
codingfriend1 profile image
Gabriel Reimers

I really like the concept of Tailwind because it is so simple and clean. I'm using that for all my new projects.

Collapse
asheeshh profile image
ashish Author

I'm kinda hooked on to tailwind as well, makes styling so much easier once you know what you're doing.

Collapse
tzwel profile image
tzwel • Edited on

of course i had to reply to the wrong comment, is still can't grasp how this site works lol

1 can't agree. Do you also feel the need to not separate your .js files and write your scripts inlined? I bet you don't. Then why is the css an exception?

2 Takes less time to write. I have to admit, I had never used tailwind but it seems to be as fast as vanilla css or even slower

background: red
Enter fullscreen mode Exit fullscreen mode
bg-red
Enter fullscreen mode Exit fullscreen mode

stuff i need to write in css / tailwind. pretty much the same thing

3 tailwind provides a lot of css properties by default like box shadows, gradients and all.

css also does it! and it's even better i think. what if you want to change the border-radius of one specific element? you can't just use the tailwind class, it's configured to always use the same value, right? you still resort to regular css

am I wrong?

Thread Thread
asheeshh profile image
ashish Author • Edited on
  1. I don't know about others but almost 70-80% of my apps is usually js, so I like to have as less other files as possible, specially having multiple Module.css file I something I really don't like to do, though I think it's kind of relative, right?

  2. Once you start using it more and more the process gets faster, I admit that it makes jsx look a bit weird due to the longer class names though.

  3. Tailwind provides methods to use custom value actually, you can just do this or extend the theme as needed by adding to tailwind.config.js.

Again, I would like to say that using vanilla css or tailwind or anything else is completely something a developer decides according to their needs and of course the one that's easier and more productive for them. I have used vanilla css in quite large projects and I still do it, that's the reason I feel like tailwind is much faster because I've been using both of them and it's quite clear which one is more productive for me.

Thread Thread
tzwel profile image
tzwel

fair, I I'm not saying that tailwind has no use cases, just wanted to know your perspective, thanks

Collapse
lockykeaney profile image
Locky Keaney

I've been wanting to give it a try for a while. Is there tooling and react plugins for it? Or just be spending time in the docs?

Thread Thread
asheeshh profile image
ashish Author • Edited on

I don't think there are plugins, you just install tailwind on your app and use class names to style the component. For installation and initialization in react you may see this, and personally, I learnt tailwind just by reading docs, the docs are easy to read, if you are ever confused about a css property and how to write it, just go over to docs and search the property. After making a few projects using tailwind, you will eventually start remembering the class names.

Collapse
tzwel profile image
tzwel

why is tailwind better than vanilla css?

Thread Thread
asheeshh profile image
ashish Author • Edited on
  1. no need for .css files.
  2. takes less time to write.
  3. tailwind provides a lot of css properties by default like box shadows, gradients and all.

just as an example, think that you want to make your div have a gray background, rounded corners, has a width and height of 50% of screen, should be flex, and also has a box shadow.

in vanilla css, you would make a separate css file, and do something like:

.my-div{
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  width: 50%;
  height: 50%;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  background-color: rgb(107 114 128);
  border-radius: 0.25rem;
}
Enter fullscreen mode Exit fullscreen mode

whereas in tailwind it all gets converted to this:

<div className="my-div flex flex-col w-1/2 h-1/2 items-center justify-center shadow-xl rounded bg-gray-500">
  ...
</div>
Enter fullscreen mode Exit fullscreen mode

maybe you can figure it out now why I'm hooked on to tailwind, but again it totally depends on the developer, there are developers who prefer vanilla CSS and can do it in the same amount of time I take to implement things on tailwind :)

Thread Thread
shifi profile image
Shifa Ur Rehman

Tailwind isn't better than vanilla css. Period.

Thread Thread
joshwcorbett profile image
Josh Corbett

Tailwind isn’t a replacement for vanilla CSS, it’s merely a tool to assist in applying css. Tailwind’s biggest advantage is the easy-to-apply built-in design system and shorthands for more complicated css values.

There can be no “this is better” because that’s a stupid argument to make. It’s like saying “JavaScript is better than Typescript”. Typescript merely makes life easier for devs but it’s still coming out to JavaScript.

Thread Thread
shifi profile image
Shifa Ur Rehman

Partially my point exactly.

Collapse
nuclearzzet profile image
Nik

I don't use any frameworks or tools for styling my websites, I just use vannila css, but if you use sass, it will make it a bit easy for you, the reason I don't use tailwind or bootstrap is because they make my html a bit complex moreover i like to make my own styles

Collapse
liviufromendtest profile image
Liviu Lupei

I agree. I also like to have clean HTML, with few attributes, few classes and stable IDs.
Tailwind is just reusing CSS wrote by whatever company is behind that, not flexible enough for me.

Collapse
nuclearzzet profile image
Nik

Yes, It is

Collapse
guilhermeomt profile image
Guilherme Tavares

I really like the CSS-in-JS approach. So, styled-components and emotion are the best picks for this kind of styling. Another library that I like using is Theme UI. It allows to style MDX content easily.

Collapse
lockykeaney profile image
Locky Keaney

Emotion has always been my go to. Seeing how everything in React is a function, why not the styles as well?

Collapse
asheeshh profile image
ashish Author

CSS in JS is ❤, will check out theme ui, sounds interesting 👀

Collapse
barelyhuman profile image
Reaper

Everything needs the team to learn something so the easiest one for me has always been vanilla css, no setup, no fancy quirky stuff.

I do still use tailwind but mostly to create component classes in css with the tailwind processor

so a very simple button might look like this

.btn{
   @apply bg-zinc-900 text-zinc-200;
   @apply inline-flex items-center px-4 py-2 rounded-md;
}

.btn:hover{
   @apply bg-zinc-800;
}
Enter fullscreen mode Exit fullscreen mode

and I use my own libs for layout stuff since they can be used across frameworks and make it easier to reuse stuff (copy paste)

Collapse
asheeshh profile image
ashish Author

makes a lot of sense, may give it a try too sometime

Collapse
joshwcorbett profile image
Josh Corbett

Writing like this ruins the whole point of tailwind

Collapse
barelyhuman profile image
Reaper

You do end up doing the same but with whatever framework you use, anyway.
If in react/svelte/vue , you'll create components that have their own sets of tailwind styles on the component and then you use the component everywhere.

The only tailwind classes repeated everywhere are the layout ones (margins/display/padding,etc)

All i'm doing is, making it easier to move the components across codebases, I can use the above in a server rendered golang based codebase or a laravel codebase and not have to re-write the design system for every framework I decide to experiment with.

another way to do this is to use web components but I don't see the performance benefit since they won't work on older browsers, hence the above approach.

I've got my own utilities for layouts for react and react native so I don't have to deal with tailwind classes and inline styles separately in both codebases, that's one case where I don't mind getting locked to the 2 libraries (react and react native)

Anyway,
tailwindcss.com/docs/reusing-style...

tailwind does recommends using it when needed.

Collapse
pontakornth profile image
pontakornth

I usually use Windi if available. It is mainly for my Svelte and Vue app. If not, I use Tailwind.

If the styling is very simple or I want to do something my own, I use CSS Module or Vanilla Extract.

If I want to focus on logic, I use Chakra UI.

Collapse
gikdev profile image
Mohammad Mahdi Bahrami • Edited on

When I wanna make a simple project I use Pico CSS which is "Minimal CSS Framework for semantic HTML"; as they say...

Pico.css • Minimal CSS Framework for semantic HTML

Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. 7.9 kB minified and gzipped!

favicon picocss.com

When I wanna go for a big one I use Tailwind and DaisyUI

Collapse
asheeshh profile image
ashish Author

yes, I have it starred on github!

Collapse
nombrekeff profile image
Keff

css

Collapse
machy8 profile image
Vladimír Macháček • Edited on

Pure CSS via stylify.dev ❤️
💎 Utility+Components - It doesn't mess your template
💎 Native syntax - you don't have to study nor remember anything
💎 The selectors can be shrinked to bare minimum
💎 No dependencies

Collapse
asheeshh profile image
ashish Author

sounds interesting, adding it to my "use in future projects" list, thanks for the info ❤

Collapse
joelbonetr profile image
JoelBonetR

I'm on React or Next JS usually so the best you can get on this stack is styled-components 😁

Collapse
kmyrrpen profile image
Nashe Omirro

The more I try out different CSS frameworks the more I realize I still have to do some quirky stuff that I may or may not like, but styled-components for sure!

Collapse
asheeshh profile image
ashish Author

I wanna give a try to all of them actually 😅haven't used styled components yet but will do eventually.

Collapse
miko profile image
Mahdi Maji • Edited on

Custom SCSS style is better to styling 😍

and using Y/Sass as library to make it fast 😋

Collapse
andrewbaisden profile image
Andrew Baisden

I prefer to use Vanilla CSS but if I was to use a framework it would be Tailwind CSS. I also sometimes use styled-components in React.

Collapse
liviufromendtest profile image
Liviu Lupei

Junior Developer mentioning Tailwind CSS in 3, 2, 1 ...

Collapse
asheeshh profile image
ashish Author

go!!!!!!!!!!!!!!!!

Collapse
zolidev profile image
Zoltán Szőgyényi

Tailwind CSS coupled with Flowbite.

Collapse
raccode profile image
Raccode

I always go with the SvelteKit/bootstrap (css) combo for small to medium-sized projects.

Collapse
codeystein profile image
codeyStein

I just go with the trusty SCSS, haven't had the time to learn a css framework, but is something I am looking forward to learn in the future :)

Collapse
felixdusengimana profile image
Felix DUSENGIMANA

I mostly use vanilla CSS. For frameworks, I like Tailwind CSS but It depends on the things I am working on.

Collapse
roman_22c01bcfb71 profile image
Roman

Tailwind it makes everything simple

Collapse
asheeshh profile image
ashish Author

true!

Collapse
nexxeln profile image
Shoubhit Dash

checkout nextui 👀

Collapse
asheeshh profile image
ashish Author

I have seen it but didn't get a chance to use yet 👀

Collapse
lhthang96 profile image
Thang Luong

Pretty cool UI that nextui has there, I think I will try it in the next react project.

Collapse
prototowb profile image
Tobias Rauer • Edited on

How about (S)CSS.
Tailwind is okay for prototyping or when you don't have time or Devs, or a small project in general.
The worst you could ever write is css-in-js (👀@ all the React Devs).

For projects in production, there is only one way if you want to do it right, and that's SCSS with BEM.
Every library will only add tech debt by obfuscating your codebase, removing semantic meaning from elements (opposed to writing your own classes with a certain methodology).

Collapse
asheeshh profile image
ashish Author

I have tried scss, but tailwind is just what I need, also, why do you think css-in-js is the worst approach? 🤔

Collapse
raibtoffoletto profile image
Raí B. Toffoletto

I've been developing a design system for my current company using MUI. It has great documentation and extensibility, totally recommended!!

Collapse
asheeshh profile image
ashish Author

can you share it here, I want to have a look 👀

Collapse
raibtoffoletto profile image
Raí B. Toffoletto

You mean the MUI resource? (mui.com) Or our design system? If the later, sorry but the products are not out yet and it's not an open source library, just an internal proprietary one.... 😔😔😔

Thread Thread
asheeshh profile image
ashish Author

yep, I meant the later, oh its okay, no worries

Collapse
brojenuel profile image
Jenuel Oras Ganawed

I really like and recommend windiCSS. Its really awesome and fast. I use vuejs as frontend, and use vuetify, naive-ui, prime-vue, and element-plus component libraries.

Collapse
asheeshh profile image
ashish Author

unocss works well with vue too :)

Collapse
brojenuel profile image
Jenuel Oras Ganawed

yup,,, I actually like adding class attribute on my elements... but yeah, I may use this in the future.

Collapse
hnrq profile image
Henrique Ramos • Edited on

I like using tailwind, but it really annoys me having a component with 30+ classes. Nowadays I use emotion or SCSS, but leaning a lot towards emotion

Collapse
asheeshh profile image
ashish Author

yes, the class names are indeed a big issue 😅

Collapse
erikasantos22 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Erika S. • Edited on

That's interesting! I'm not a tech person and I don't know how to code so I've been exploring the no-code space. I've tried this Frontlyapp which is so cool and it's saving me a lot of time so far. Check the demo apps here: frontlyapp.com/?r=dv