Tailwind CSS Tutorial

Tailwind CSS is an open-source CSS framework.

Tailwind CSS is a feature-rich, utility-first CSS framework for quickly building custom designs.

Tailwind CSS was created by Adam Wathan and Jonathan Reinink in 2017 and released in 2018.

The core concept of Tailwind CSS is to provide a large number of utility classes that can be directly applied to HTML elements to achieve designs.

Who is this tutorial for?

As long as you have basic knowledge of HTML and CSS, you can read this tutorial and develop your own website. After completing this tutorial, you will reach an intermediate level of using Tailwind CSS to develop web projects.

Prerequisites for reading this tutorial:

Before you start reading this tutorial, you must have basic knowledge of HTML, CSS, and JavaScript. If you are not yet familiar with these concepts, we recommend reading our tutorials first:

Tailwind CSS Examples

The following is a simple Tailwind CSS example:

Tailwind CSS Examples

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

Try it yourself »

The above example demonstrates how to quickly define a card with a blue background, white text, padding, and rounded corners using simple class names.

Reference Links

Tailwind CSS official website:https://tailwindcss.com/

Tailwind CSS official documentation:https://tailwindcss.com/docs/

Other Extensions