Understanding the Basics of Tailwind CSS/

...

/

Customizing Tailwind

Customizing Tailwind

Learn how to customize Tailwind according to our needs.

We'll cover the following...

In this chapter, we’ll dive even deeper and explore how we can customize Tailwind either by adding new utilities or by tweaking the existing ones.

Creating a new project

Tailwind is already a very versatile tool for CSS, but there will be times when we’ll want to add extra features to it. In this lesson, we’ll explore the most common ways Tailwind can be customized to suit our needs.

First, we need to create a new Tailwind project.

Next, we’ll create an index.html file in the root directory and add the following content to it:

Press + to interact
<!-- /index.html -->
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="tailwind.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" ➥rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>
<body>
  
</body>
</html>

We have a bunch of links here:

  • Line 8: The first link includes the compiled Tailwind styles.

  • Line 9: The second link includes the Font Awesome icons library. We’ll use its icons in the examples later on.

  • Line 10: The third link includes ...