Hyoban

If you don't understand HTML and CSS yet#

HTML probably looks like this. Each HTML tag has its own meaning (such as representing an image or a link); it is either surrounded by a group of tags or self-closing; and can be nested hierarchically. Many HTML tags combined together form the web page you see in your browser.

<img alt="A dog on an iPad" src="/assets/images/dog-ipad.jpg" />
<p class="text">Here is <a href="https://example.com">a link</a></p>

If you are interested in common HTML tags, you can check out this Demo page from Simple.css.

However, if you only have HTML, your web page may look very plain, with only the default styles provided by the browser. So, we need CSS to add styles to our web page.

.text {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
}

.text is a CSS class selector that matches tags in HTML with class containing text, and adds styles to them. Here, we simply set the color, size, and line height of the text.

With HTML and CSS combined, you can create visually appealing static web pages. If you are interested in learning more about CSS syntax, don't worry, you will have an excellent learning resource after reading this article.

What is Tailwind#

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

The above is the official introduction to Tailwind. In simple terms, it is an atomic CSS framework that provides many utility classes for adding styles directly to your HTML.

Before we dive into how to learn CSS through Tailwind, let's take a look at what Tailwind does for us:

1. Scans your HTML files and finds all class attributes.
2. Generates corresponding CSS content based on the utility classes matched in these class attributes, such as flex m-1.

Yes, it's that simple. You can manually write the CSS content without using Tailwind. It doesn't require as much learning as Vue.js or React to understand what they do.

Why use Tailwind to learn CSS#

Compared to learning through MDN documentation:

1. Tailwind's documentation is more concise with more illustrations, while MDN's documentation is more detailed with more concepts.
   
2. Tailwind's classification is clearer and more focused, while MDN's documentation is more comprehensive but can be overwhelming.
   • There are many aspects to CSS, but we only use a portion of it in daily development.
3. Tailwind's documentation helps you quickly understand key concepts such as dark mode support and responsive design.
4. Tailwind's theme system helps you create more visually appealing pages.
5. Tailwind provides a powerful Playground where you can learn directly in your browser.

If you are a designer#

As a designer, if you only use design tools for designing, you may encounter a problem:

Developer: I can't implement this design!

But if you design with code, if they dare to say that, just give them the link to the Tailwind Playground and see if they still have anything to say.

At the same time, using the same set of technologies as developers means you can improve efficiency:

1. Developers don't need to manually translate the entire design into code.
2. Designers can ensure that their designs are implemented exactly as intended.

Final emphasis#

Not all Tailwind utility classes are intuitive and simple, just like flex-row is equivalent to flex-direction: row;. grid-cols-1 corresponds to slightly more complex generated CSS, it is equivalent to grid-template-columns: repeat(1, minmax(0, 1fr));. Before you understand the meaning of the CSS generated by Tailwind, please don't just rely on Tailwind's documentation, you should learn the specific meaning of this property in the MDN documentation.

In the Playground, you can see the generated CSS for a utility class through autocompletion and hovering over it with your mouse. So, start learning Tailwind, even if you don't know CSS. Its excellent documentation and Playground will be great helpers in your learning journey.

A plugin#

In vscode, you can install a plugin I wrote to see which text generates corresponding CSS.