71 lines
3.1 KiB
Markdown
71 lines
3.1 KiB
Markdown
|
+++
|
||
|
|
draft = true
|
||
|
|
date = 2020-02-19T21:30:06Z
|
||
|
|
title = "Bootstrap vs. Tailwind"
|
||
|
|
description = ""
|
||
|
|
slug = "bootstrap-tailwind"
|
||
|
|
categories = []
|
||
|
|
tags = ["Bootstrap", "Tailwind", "CSS"]
|
||
|
|
series = []
|
||
|
|
+++
|
||
|
|
|
||
|
|
## what they are?
|
||
|
|
|
||
|
|
|
||
|
|
tailwind - utility first css framework
|
||
|
|
utility first - no automatically styled components
|
||
|
|
- gives utility classes that help with styling, allows to build classes
|
||
|
|
- basically just bunch of predefined css utility classes
|
||
|
|
- creating a project that has a custom look without writing any css.
|
||
|
|
bootstrap - UI kit framework - has a default theme and a number of design decisions.
|
||
|
|
|
||
|
|
popularity of both - bootstrap most popular and first, tailwind new and upcoming.
|
||
|
|
|
||
|
|
## my experiences with both of them.
|
||
|
|
|
||
|
|
what i like about both.
|
||
|
|
tailwind - flexibility - modules - can remoe unused modules(?)
|
||
|
|
e.g., reducing amount of screen sizes used in responsive qureies and only keeping those needed - 5 screens
|
||
|
|
(36.4kb) to 2 (15.4kb) [source](https://blog.logrocket.com/tailwind-css-is-it-tomorrows-bootstrap-ebe560f9d00b/)
|
||
|
|
can also use purgecss to remove unused
|
||
|
|
helps with a lot of little thigs like margins, paddings, etc
|
||
|
|
|
||
|
|
bootstrap - better for layouts, has a good grid/flex system for layouts.
|
||
|
|
recent versions also contains utility classes
|
||
|
|
- also has components containing javascript
|
||
|
|
|
||
|
|
tailwind - people complain about larger filesize (36.4kb?) vs bootstrap (22.1kb? - is this without js tho?)
|
||
|
|
- is this true? does this include all of bootstrap (js, everything???)
|
||
|
|
- look into properly
|
||
|
|
|
||
|
|
## what i don't like about both of them.
|
||
|
|
|
||
|
|
bootstrap - sites always look same, even with diffeent colour schemes
|
||
|
|
tailwind - doesn't really push sites rto looking same?
|
||
|
|
|
||
|
|
bootstrap - big changes to layout mean a lot of changes to code and a battle - tbf this is not what bootstrap is designed for - designed to get UI up and running quickly
|
||
|
|
|
||
|
|
tailwind - amount of classes added to markup - very noisy
|
||
|
|
same problem as with atomic css(which is based on?) - getting close to just applying styles inline(what is term for using style tags - it's not inline)
|
||
|
|
- @apply does help tho
|
||
|
|
|
||
|
|
## which i prefer and why.
|
||
|
|
|
||
|
|
like tailwind for sites where theme is important and I don't want to fight to override styles set by the framework to make it look unique.
|
||
|
|
like bootstrap for sites where theme is not important - just want a nice looking, fully functional theme set up quickly. usually personal projects that aren't meant for public.
|
||
|
|
actually prefer not to use either - only like to use them on projects where it's not desirable/practicak to be
|
||
|
|
spending any time at all on styling - bootstrap probably better in this regard, but prefer customisability of
|
||
|
|
tailwind
|
||
|
|
|
||
|
|
really like about tailwind (both of them?) - don't need to think up names for css classes!
|
||
|
|
|
||
|
|
## the future of both of them.
|
||
|
|
|
||
|
|
tailwind comes with laravel(?)
|
||
|
|
|
||
|
|
## Example of both
|
||
|
|
|
||
|
|
have a nice little card thing styled purely with bootstrap, and the same styled with tailwind.
|
||
|
|
talk about how long it took for each and the results.
|
||
|
|
maybe have one with default styling from framework, and then another with some customised bits.
|