Getting Started with Tailwindcss

Tailwindcss is a functional class-first CSS framework that quickly builds websites through the combination of flex, pt-4, text-center and rotate-90 atomic classes without leaving your HTML. Just remember the atomic class, don't think about CSS naming, just write HTML in one brain!

It differs from regular Bootstrap, Bulma, and Material UI in that it does not provide preset components such as buttons, menus, and breadcrumbs. Create a button in Bootstrap:

<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-link">Link</button>

get as follows:

insert image description here
And Tailwindcss has no fixed preset styles, so you need to combine them yourself:

<button class="bg-sky-600 hover:bg-sky-700 ...">  Save changes</button>

result:

insert image description here
We are using the V3 version of the CDN here (not recommended), if you want to cooperate with the build tool to see how the official website is used. V2's CDN imports a CSS file, while V3 imports a script.

<script src="https://cdn.tailwindcss.com"></script>

<h1 class="text-3xl font-bold underline">    Hello world!</h1>

result:

insert image description here
Add state styles such as hover / foucs
https://tailwindcss.com/docs/hover-focus-and-other-states

<h1 class="text-3xl font-bold underline hover:bg-violet-600">    Hello world!</h1>

result:

insert image description here
See how hover is implemented:

insert image description here
How did we add hover to a style before?

.btn-primary {
    
      background-color: #0ea5e9;}.btn-primary:hover {
    
      background-color: #0369a1;}

In Tailwindcss, instead of adding a hover state to an existing class, a class with a specific function is added:

.bg-sky-500 {
    
      background-color: #0ea5e9;}.hover\:bg-sky-700:hover {
    
      background-color: #0369a1;}

In this way, those with similar hover styles can be reused.

The initial burden of learning Tailwindcss is to memorize class names. Fortunately, there are rules to follow:

insert image description here

Getting Started with Tailwindcss

Guess you like