Adam Wathan - Tailwind CSS: It looks awful, and it works - Rails World 2023

Learn how to simplify your CSS styling with Tailwind CSS, a fast and intuitive CSS framework that helps you avoid unnecessary code and achieve flexible layouts using its set of pre-defined utility classes.

Key takeaways

If you try to control layout in CSS, you’ll end up with a lot of classes in your markup.
You can use CSS variables to make your code more concise and easier to maintain.
Tailwind CSS is a fast and intuitive way to work with CSS.
You should use a CSS framework to avoid writing unnecessary CSS code.
Using a preprocessor like ERB or a templating language makes it hard to write custom CSS code.
In Tailwind, you can use the flex utility to make your layout flexible.
You can use the utility keyword to apply styles conditionally.
Using a grid system like-css-grid makes it easy to layout your content.
A set of pre-defined utility classes in a CSS framework like Tailwind makes it easy to style your elements.
Using a preprocessor like ERB can make your code more readable by abstracting away the details of the underlying language.
Tailwind provides a utility class that allows you to apply styles conditionally.
Using the utility keyword eventuate you apply styles conditionally.
Using a grid system like-css-grid makes it easy to layout your content.

Adam Wathan - Tailwind CSS: It looks awful, and it works - Rails World 2023

More talks