hugo-blog/content/posts/bootstrap-vs-tailwind.md

+++
draft = true
date = 2020-02-19T21:30:06Z
title = "Bootstrap vs. Tailwind"
description = ""
slug = "bootstrap-tailwind"
categories = []
tags = ["Bootstrap", "Tailwind", "CSS"]
series = []
+++

## Introduction

## 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.
								- v1.0 released May 2019
								- github 28.1k stars, 9 open issues, 960 closed (6/10/2020)
bootstrap - UI kit framework - has a default theme and a number of design decisions.
	- released august 2011
	= github stars 145k, 317 open issues, 19,313 closed (6/10/2020)

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.