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

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.

 

Example: https://tailwindcomponents.com/component/quote-box

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

 

https://purgecss.com/

 

https://www.gatsbyjs.com/plugins/gatsby-plugin-purgecss/

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

 

Made with Slides.com