DEV Community

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

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.