Tailwind CSS is a practical class-first CSS framework that controls styles by using predefined classes directly on HTML elements. 1. You can first use CDN to introduce the experience during installation; 2. It is recommended to gradually transition to npm to install and configure the tailwind.config.js file to load on demand; 3. Practical classes such as bg-blue-600, text-white, etc. are used to quickly build components; 4. Use layout classes such as flex and grid to combine responsive prefixes such as sm: and md: to achieve adaptation; 5. Customize theme colors, fonts and other options through tailwind.config.js. After mastering common categories and structures, development efficiency will be greatly improved.

When you first come into contact with Tailwind CSS, you may feel that it is a bit different from the traditional way of writing CSS. You no longer define class names and write style rules yourself, but instead use practical classes provided by Tailwind to control styles directly on HTML elements. This method may seem a bit strange at first, but if you get used to it, you will find that it is very efficient.

Installation and basic settings

The installation of Tailwind is actually not complicated. If you are a novice, it is recommended to start with the introduction of CDN first, and you don’t need to configure PostCSS and build tools from the beginning.

You can introduce it like this:

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

Then you can write the class of Tailwind directly in the HTML tag, such as:

 <div class="p-4 bg-blue-500 text-white rounded-lg">Hello, Tailwind!</div>

After you get familiar with it, consider installing and configuring the tailwind.config.js file through npm, so that it can load on demand and reduce the final CSS file size.

How to use practical categories so as not to mess up?

The core of Tailwind is "practical priority", which means it provides a bunch of small functional classes, such as text-center controlling text centering, m-2 setting margins, etc.

At the beginning, you may be worried about whether too many categories will be written in a mess. In fact, just remember a few common combinations to quickly build the interface.

To give a simple example: a button

 <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">
  Submit
</button>

Here we use background color, hover state, font, margin, and rounded corners, and they are combined to make a good-looking button.

suggestion:

• Remember more commonly used classes, such as layout-related flex, grid, and gap
• Color and spacing classes are most commonly used. Remember the prefixes such as p- , m- , text- , bg-
• Don't be afraid of writing too much class, this is how Tailwind is designed

How to do responsive design?

Tailwind supports responsive design and has very intuitive syntax. Just put the screen size prefix in front of the class name, such as sm: , md: , lg: .

For example, you want a div to be arranged vertically on a small screen and horizontally on a large screen:

 <div class="flex flex-col md:flex-row">

It means that the default is flex-col (vertical), which becomes flex-row (horizontal) when the screen width is greater than 768px.

Common breakpoints:

• sm : 640px
• md : 768px
• lg : 1024px
• xl : 1280px

This mechanism allows you to easily adapt without writing additional media queries.

How to customize the theme?

Tailwind's default theme colors, fonts, spacing, etc. may not be exactly in line with your project needs. At this time, you need to modify the tailwind.config.js file to customize it.

For example, if you want to add a custom color:

 theme: {
  extend: {
    colors: {
      'custom-blue': '#0a3d62',
    },
  },
}

Then you can use text-custom-blue or bg-custom-blue in the class.

You can also expand fonts, spacing, shadows, etc. This part can be checked according to the document to see how to modify it.

Basically that's it. Tailwind looks a lot, but after using it, you will find that writing styles become very fast, especially with editors like VSCode, which automatically completes and doubles the efficiency.

The above is the detailed content of Tailwind CSS tutorial for beginners. For more information, please follow other related articles on the PHP Chinese website!