In this talk Amadou Sall gives an introduction to Tailwindcss, a utility-first CSS framework for rapidly building custom designs.
Key Takeaways from this talk
- See Tailwind in action
- Benefits of using Tailwind and why it's awesome
- Perceived barriers
- Challenges faced when using Tailwind
Approaches when writing CSS
When writing CSS, generally there are two ways:
When styling a button using CSS you'll have something like this:
padding: .5rem 1rem;
but you also need to add hover, focus, and active states to this element. So you'll do something like this:
With this approach:
- You're building custom designs
- Time consuming
- Not scalable
- Bad Code quality
The other approach is to use a CSS framework like Bootstrap
html<button class="btn btn-primary">My Button</button>
You need to add these two classes to every button.
This method is:
- Productive, you don't spend a lot of time writing CSS
- No need to be a CSS expert, just add the classes and it works
- Code quality is high since you don't need to worry about naming conventions or repetitive code
- UI monotony. All websites that use this framework will look the same.
- Hard to customize. You must override styles
Tailwind is a utility first framework. It doesn't give you components like bootstrap, but it provides reusable CSS utility classes that you can use to build your UI.
Before seeing what Tailwind looks like, make sure that you keep an open mind because once you see how it's used, it will seem like a terrible idea at first. But once you start getting comfortable using Tailwind, you will only want to use it.
Amadou Sall gives a live coding session at 9:35 during his talk.
Here's the link for the documentation referenced in the talk.
Use NPM or Yarn to install Tailwind
bash# using npm
npm install tailwindcss
# using Yarn
yarn add tailwindcss
Add Tailwind to your CSS
PostCSS will be used for this file. It is like a compiler for CSS, that it will transform the directives to actual CSS
Here's what a button built using Tailwind looks like
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-pink-500">My Button</button>
Here's an explanation of what each class does:
p-16 adds padding to the top, right, bottom, and to the left of an HTML element.
px-2 adds padding to the left and right
py-2 adds padding to the top and bottom
bg-blue-500 is used to add the background color.
this class is made up of 2 parts:
bg to add a background color
blue-500 the color name + it's shade. ( You can have blue-900 if you want a darker shade)
text-white class is used to change the text color. It also follows the same naming convention as the background color (
To add a border-radius you simply add the
To add a hover state to an element, you simply add the hover
hover:bg-pink-500 class will make the element's background color pink on hover.
Amadou gives another example of building a layout using Tailwind at 12:21 in his talk
Why Tailwind is Awesome
- It's a true design system. It allows you to define everything you need to create your own unique design system
- It's responsive to the core. You don't need to write media queries
- Highly customizable. You can tweak everything to your liking in the config file.
- You can build your own tailwind plugins.
- Smaller bundle size, which means your website will be faster. This is done by removing unused CSS
Great Developer Experience
- You don't need to leave your HTML and work in a different CSS file.
- You don't worry about naming things.
- Allows you to rapidly prototype.
- Refactoring is easy. You don't need to care about deleting a CSS file.
But aren't we writing inline styles this way?
Not really, because you can easily customize the styles.
Won't there be a lot of repetitions?
You can create components using tailwind and re-use them.
The bundle size must be huge, right?
When used correctly, you don't need to worry about the bundle size.
Challenges you might face
- You need to know CSS. However, it's a great opportunity to learn CSS through Tailwind.
- Framework integration is not straight forward.
- Internet Explorer isn't targeted by tailwind
- Working with CMS content is challenging. Since you don't have access to the HTML directly, you can't add your utility classes. Thankfully, tailwind provides directives that can be embedded inside CSS files.
✏️ Edit on GitHub