Hyoban

If You Don't Quite Understand HTML and CSS#

HTML looks something like this. Each HTML tag has its own meaning (such as representing an image or a link); it can be surrounded by a group of tags or self-closing; it can be nested hierarchically. Multiple HTML tags combine to 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're interested in common HTML tags, you can check out this Simple.css Demo page.

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, thereby adding styles to them. Here we simply set the text color, size, and line height.

By combining HTML and CSS, you can create beautiful static web pages. If you're curious about other CSS syntax, don't worry, after reading this article, you'll have an excellent learning document.

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 to allow you to add styles to your web page directly in HTML.

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

1. Scans your HTML files to find 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 completely write the CSS content manually without using Tailwind. It doesn't require a steep learning curve like Vue.js or React to understand what it does.

Why Use Tailwind to Learn CSS#

Compared to learning through MDN documentation:

1. Tailwind's documentation is more concise, with more illustrations; MDN's documentation is more detailed, with more concepts.
   
2. Tailwind categorizes more clearly and highlights key points; MDN's documentation is more comprehensive but can be overwhelming.
   • There are many CSS concepts, but in daily development, we only use a portion of them.
3. Tailwind's documentation helps you quickly understand some key concepts, such as dark mode support and responsive design.
4. Tailwind's theme system helps you create more aesthetically pleasing pages.
5. Tailwind provides a powerful Playground that allows you to learn directly in your browser.

If You Are a Designer#

As a designer, if you only use design tools to create designs, you might encounter a problem:

Developer: I can't implement your design!!

However, if you design with code, if they dare to say that again, just throw the Tailwind Playground link at them and see if they dare to say more.

At the same time, using the same technology as developers means you can achieve efficiency gains:

1. Developers don't need to translate the entire design into code piece by piece.
2. Designers can ensure that developers perfectly replicate their designs.

Final Emphasis#

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

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

A Plugin#

In vscode, you can see which texts will generate corresponding CSS by installing a plugin I wrote.