Hyoban

If You Don't Quite Understand HTML and CSS Yet#

HTML generally 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 be self-closing; it can be nested hierarchically. Many 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 basic, with only the default styles provided by the browser. So, we need CSS to add styles to our web pages.

.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 applying 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 pages directly in HTML.

Before we start discussing 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 those 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's categorization is clearer and highlights key points better; MDN's documentation is more comprehensive but can be overwhelming.
   • There are many CSS concepts, but we only use a portion of them 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 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, one problem you might encounter is:

Development: I can't implement your design!!

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

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

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 rely on Tailwind's documentation; you should learn the specific meaning of this property from MDN's documentation.

In the Playground, you can see the CSS generated 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 journey.

A Plugin#

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