Tailwind CSS - Installation

Previous
Quiz
Next

Installing Tailwind CSS is quite an easy task to do, but before installing, you should know that if your purpose is to learn Tailwind CSS, then you can use the CDN link. If you are working on a project and want to create your own classes or configure the predefined classes, then we recommend you install Tailwind CSS.

Tailwind CSS is fast, easy, and flexible. It contains a list of classes that it scans from HTML files, Javascript components, and other templates, and based on that, it generates corresponding styles over the document. Tailwind CSS eliminates the need to write custom CSS code.

How to use tailwind css?

  • CDN Links: By inserting CDN links in our HTML document, we can use Tailwind's utility classes effectively.
  • Install Tailwind CSS: By installing Tailwind CSS via npm, we can use Tailwind CSS's utility classes effectively.

Use Tailwind CSS through CDN Links

We can apply Tailwind CSS in our HTML document by adding CDN links via two ways:

Using <link> Tag

We just need to include a <link> tag in the <head> section of your HTML. This gives access to Tailwind's utility classes without extra files on your server.

<link href= 
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
      rel="stylesheet">

Example

In this example we have used the CDN link through the <link> tag.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Tailwind CSS - Installation</title>
    <!-- Tailwind CSS CDN Link -->
    <link href= 
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body>
    <p class="text-3xl font-bold">
        Tailwind CSS through CDN Link
    </p>
    <p class="m-2">
        In this code we have used CDN link 
        through HTML link Tag
    </p>
</body>

</html>

Using <script> Tag

We just need include a <script> tag in the <head> section of your HTML. This gives access to Tailwind's utility classes without extra files on your server.

<script src="https://cdn.tailwindcss.com"></script>

Example

In this example we have used the CDN link through the <script> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tailwind CSS - Installation</title>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <p class="text-3xl font-bold">
        Tailwind CSS through CDN Link
    </p>
    <p class="m-2">
        In this code we have used CDN link 
        through HTML script Tag
    </p>
</body>

</html>

Install Tailwind CSS using CLI Tools

To install Tailwind CSS there are certain prerequisites, that we mentioned below.

Prerequisites for Installing Tailwind CSS

  • Nodejs Installation: To install Tailwind CSS via npm nodejs, installation is necessary. You can check this Node.js - Environment Setup.

Steps to Install Tailwind CSS

Follow the bellow steps in mentioned order to install Tailwind CSS.

Step 1: Install tailwind css via npm using the command as mentioned below.

npm install -D tailwindcss
Tailwind CSS Install

Step 2: Using the command mentioned below you can create your tailwind.config.js file.

npx tailwind css init
Tailwind CSS npx
Tailwind CSS config.js

Step 3: Create you CSS file and Add the @tailwind directives for each of Tailwinds layers to your main CSS file.

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind directives example

Step 4: Now, use the command mentioned below to create another output.css file and run the CLI tool to scan your template files for classes and build your CSS.

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Tailwind CSS Output File
Tailwind CSS Output

Step 5: Add your compiled CSS file to the <head> and start using Tailwind's utility classes to style your content.

<!doctype html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="./output.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline">
    Hello world!
    </h1>
</body>
</html>

Conclusion

As we learned how to install Tailwind CSS, but we highly recommend you to use the CDN link through <script> tag. There is a variation in color classes which is correctly render when we will use CDN through <script> tag.

Print Page
Previous
Next