Intro to tailwindcss
What is tailwindcss?
Low level utility class framework.
Scope of this talk.
-
High level overview
- Responsive classes
- Learn these classes first
- purge-CSS for minimal builds
- Shareable components
- Resources
But? it's a framework?
Yes, but different; the difference with frameworks like bootstrap and foundation is that it only provides the raw basic classes to style and customize your own designs.
tailwindcss doesn't come with opinionated components, for example, a navbar, accordions, tabs, or any JS.
Example of a styled component:
Open the following codepen, and resize:
https://codepen.io/isramv/pen/jOqpMdX
As you can see in the example, the only HTML has been written; there was no need to use CSS. By using classes, the component was styled.
Tailwind is responsive.
tailwind has 4 breakpoints by default.
- tailwind comes with these default breakpoints and they can be customized to match your mockups.
Learn this one's first, part 1
.rounded
https://tailwindcss.com/docs/border-radius
.bg-{color code}-{100-800}
https://tailwindcss.com/docs/background-color
.m-{size}
https://tailwindcss.com/docs/margin
.p-{size}
https://tailwindcss.com/docs/padding
.shadow
https://tailwindcss.com/docs/box-shadow
Learn this one's first, part 2
Shareable components
If tailwindcss is not customized you can share and use other people components for example:
Go to https://tailwindcomponents.com/
Pick one template and used it in your site, and start customizing from there.
GatsbyJS port: -->
<-- Original
Purge-CSS to minimize your build.
With Purge CSS, you can minimize the CSS that is going to be generated, the templates get analyzed and processed to remove unused CSS from your build
Purge-CSS to minimize your build.
before purge CSS the page weights 4.78 MB
Purge-CSS to minimize your build.
after purge CSS the page weights less than 200K total
Resources:
One size fits all?
Not all technology is going to appeal to everybody, and the points people make are valid.
https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90
https://johanronsse.be/2020/07/08/why-youll-probably-regret-using-tailwind/
Why I don't like tailwindcss?
https://www.youtube.com/watch?v=qECXE-retvk
Intro to tailwindcss
By Israel Morales
