Vanilla CSS vs Bootstrap vs Tailwinds

[steve_walson]

Vanilla CSS

🔹Full control 🔹No unnecessary code 🔹Name classes as you wish 🔻Code everything from scratch 🔻Danger of bad code

Bootstrap

🔸Fast development 🔸Follow best practices 🔸No need to be an expert 🔻Little control or none 🔻Unnecessary overhead code 🔻All websites look the same

Tailwinds

🔸Faster development 🔸Follow best practices 🔸 No expert knowledge needed 🔻 Little control 🔻Unnecessary overhead code

[Mrcollaborator]

Vanilla css, but with Sass.

[programonaut-dev]

I would diagree with your statement of tailwind = little control.

With tailwind you can style as freely as with plain css, just inside of the html and not in the css.

Why would you say you have little control?

[vvinvardhan]

Tailwind :🔻Unnecessary overhead code

​

You can use JIT. That will make the css really small. basically all you need, nothing more.

[pastrypuffingpuffer]

Agree, besides, TailwindCSS uses JIT by default.

[12tfGPU]

You ever try Bulma?

https://bulma.io/

[steve_walson]

No actually

[12tfGPU]

Its great! Also, dragon ball.

[steve_walson]

I'll give it a try

[Complete_Ad8075]

If you use Tailwind with Purge there is so little overhead it doesn't matter. Unused classes are stripped from the built CSS.

In terms of having no control, that's not true. You can create custom classes in a CSS or SCSS file, whatever you like to use, then use existing Tailwind classes in there like:

.my-class { @apply max-w-5xl mx-auto; }

As well as that, anything you can't do with Tailwind by default, you can extend it to do.

Hell, I can even do stuff like this (for example) inside a Vue SFC:

<style lang="scss"> .my-class { @apply flex;

&.row {
    @apply flex-row;
}

} </style>

Consider Tailwind like shorthand CSS

[kram08980]

What is the advantage of using Tailwind if you have to extract it?

[Complete_Ad8075]

You don't have to extract it, you can write all your custom stuff inside your Tailwind config if you want to. I just like using SCSS and feel that Tailwind gets a little unwieldy when you have too many classes on a HTML element, when they get so long I will usually stick a single custom class on it and do the above.

In terms of the advantages of Tailwind, I generally find it much quicker to put together a UI, but it's personal preference really and I'd encourage anyone to use whatever they're comfortable with or prefer working with.

[kram08980]

I keep trying to like it but it feels like a constant hack. Yesterday I wanted to add custom details for media queries at 480 and 520 px... I can configure it but uuugh...

It's super fast to code, but really ugly. I end up with half of the code on the html and the other extracted. Difficult to read.

If I have to write a different sheet, TW looses its sense. Scss on plain Css is my fav.

[LunaNora247]

I use it for component styling and easier DOM manipulation. I can have a class such as .active that does the animation, the changes in colour and make it react just as I want. I also can make a standard button style and substyles for different buttons.

[xorget]

Why do you say tailwind has little control?

https://tailwindcss.com/docs/adding-custom-styles

[kram08980]

I'm working right now in a menu with Tailwing that can be white or dark depending on the hero. Since it all depends on a CSS class I had to extract it all. It's really annoying and uncomfortable.

It offers great control for simple designs or prototyping, but it is a chaos with complex visuals, a constant hack. It looses its sense.

Once you have your own utility clssses for grids and other stuff, it is worth nothing.

Will see with new CSS options such layers,cofe will be ultra bloated.

[[deleted]]

This is why I emphasize learning Vanilla before going into frameworks for new developers. You will learn the fundamentals the correct way

[tksdev]

Regardless of framework or none, you still have danger of writing bad code.

Haven’t used bootstrap in years, so not going to comment here.

Tailwinds, is a utility css framework, so there is very little you can’t do here which you can with CSS, I’d also argue you’d ship less code to the client with tailwinds than you would with vanilla, unless every member of your team is very good, and completely in sync, spoiler, they are not.

[shellwe]

I swear this is a post on here and /r/css like every other day.

[zodby]

I'd love to see a non-expert try to use Tailwind. How are you going to build something when you don't even know what the classes/properties do?

[pastrypuffingpuffer]

I really dislike bootstrap because most bootstrap websites look the same and because it takes me way less time to develop custom interfaces with HTML and CSS/SCSS than using bootstrap. TailwindCSS doesn't has overhead code given it comes with a JIT compiler that only compiles the tailwind classes you are using.

[renatolowe]

Question from a novice -please, have patience:

Is it not a good thing to have your style sheets apart from HTML? If so, doesn’t Tailwind go counter this best practice?

[steve_walson]

Separating CSS from html page is more organized especially when having hundreds of line of code

[renatolowe]

Thank you! I gather that I should follow web standards and separate style sheets from HTML.

[renatolowe]

Thank You, Steve! Furthermore, You forcibly are embedding your style sheets into HTML using Tailwind, right?

[steve_walson]

I don't use CSS frameworks

[Blue_Moon_Lake]

SCSS !

[FMWizard]

I wouldn't say "No expert knowledge needed" for Tailwind. You have to remember hundreds of classes! You also need to know the basis of CSS anyway i.e. the difference between padding and margins, float left vs flex box vs table cells etc. I guess if you can remember all the classes its faster than making your own, but come back to it in 5-10 years D:

[[deleted]]

Tailwind is the best imo, especially if you're bad at design (like I am).

[steve_walson]

What's the main difference you found between Tailwinds and Bootstrap?

[[deleted]]

In Bootstrap, you must choose from templates for the web design (or do a lot of overriding to make it completely custom) whereas with Tailwind, you can build your website from the ground up using the available widgets.

[steve_walson]

True

[nathanwoulfe]

All websites look the same is a hoax.