Scribd
Upload
17 views

Tailwind CSS.11

Uploaded by

Harish Verma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views

Tailwind CSS.11

Uploaded by

Harish Verma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Tailwind CSS

A utility-first CSS framework for rapidly building


custom designs
Bootstrap CSS
Tailwind CSS
Bootstrap vs Tailwind CSS
Performance of Bootstrap vs. Tailwind CSS

● Bootstrap requires four main files to be incorporated in the


project for development which requires heavy space to be
occupied about 300 kb.

● In Tailwind CSS, we need style sheets to get our task done. This
CSS file occupies about 30kb of the space.
Build time of Bootstrap vs. Tailwind CSS

● In Bootstrap, we have a lot of overhead code, and this causes the


build time to be around 160 seconds

● As Tailwind has built-in utility libraries, this shortens the build


time up to 8 to 10 seconds
Community of Bootstrap vs Tailwind CSS

● Bootstrap has been released about nine years ago and used as the
most popular framework of CSS. That’s why it is having one
largest communities of millions of developers with tools and
forums.

● If we talk about Tailwind, it has been introduced recently and has


started growing gradually. That’s why there is still a lot of room
for Tailwind to have a strong community of developers and tools
What is Tailwind CSS

Tailwind CSS is basically a utility-first CSS framework for rapidly


building custom user interfaces. It is a highly customizable, low-level
CSS framework that gives you all of the building blocks you need to
build designs and web applications.
Advantages of Using Tailwind CSS

Customization No Naming Things No Context Switching


It comes with a default Tailwind provide utility One of the reasons
configuration, but it’s classes that can be used Tailwind is so much
straightforward to 99% of the time. The faster to use is you
override the default only time you’ll have to barely ever have to
configuration with a name things is when you switch contexts.
tailwind.config.js file in extract a component, HTML -CSS
your project.

Responsive Small Size (after


Development Speed Everywhere Purge CSS)
Because you don’t need All of Tailwind utilities Initially, when you see
to name things, you are generated with the CSS file outputted
don’t have to switch responsive versions that by Tailwind, you might
context as much, and you can use to make be shocked at the large
you’re not fighting the your site look different file size (477.6kb
framework to make on mobile, tablet, and unminified). Thankfully,
customizations, desktop screen sizes. On there are a few things
prototyping and top of that, it offers the that can help reduce the
implementing custom @screen and file size tremendously.
designs is really fast @responsive directives
Tailwind config
Tools for Tailwind css
RESOURCES

■ https://tailwindcss.com/
■ https://tailwindcss.com/screencasts/
■ https://tailwindcss.com/docs/functions-and-directives
■ https://dev.to/naveenkharwar/scope-of-tailwindcss-e85
{ THANKS }

You might also like