Note: this is the first article of a long serie to teach the entire CSS library Tailwindcss.
Introduction to Tailwindcss
Tailwind CSS is a utility-first CSS framework that helps you quickly and reliably create a completely custom, fully responsive website design. With Tailwind, you can use utility classes to control the layout, color, spacing and typography in your application — without needing to write any custom CSS or leaving your HTML.
Depending on what framework you are using, please refer to officials installation documentation to install it.
How to use colors with Tailwindcss?
Tailwind means you have to write less custom CSS. Instead of building custom designs with cascading stylesheets, you style your elements by applying pre-existing classes directly in your HTML. By using utility classes in this way, you can build custom designs without writing CSS!
Also it helps you write clean and maintainable code by providing a flexible grid, fast typography, CSS variables, and more.
With Tailwind, you don’t have to go from blank slate to brand-ready in a single step. Instead, we include an expertly-crafted default palette out-of-the-box that’s ready for you to start with or customize.
<h1 class="text-blue-500 border border-blue-500 bg-slate-100">Blue title</h1>
In this example, we’ll have a blue title with blue borders and a background grey-light.
Customization
Tailwind is a framework for building bespoke user interfaces, so it doesn’t come with a lot of built-in frameworks. As you’re building your application, you might wonder how to handle web typography or CSS transitions, or why you can’t just use .css styles instead of the built-in class system.
By default, Tailwind will look for a tailwind.config.js at the root of your project where you can define any customizations.
However do not write directly colors into colors entries. Please place your news colors into extend.
If you are looking for a complete lesson on how to use colors with Tailwindcss, I highly recommend you to watch my video above.
Best,
Guillaume