3.1 KiB
+++ 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 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.