Installation via Tailwind CDN

PreviousHistory of Tailwind CSS NextInstallation via Tailwind CLI

Last updated 1 year ago

Was this helpful?

Installation via Tailwind CDN

Tailwind CSS Project setup using a CDN (Content Delivery Network)

The Play CDN is designed for development purposes only and is not the best choice for production.

For production, you can use other options like Tailwind CLI, Using PostCSS which we will see later.

✅ Steps to follow to complete Tailwind CSS Setup Successfully

Start by creating a new HTML file or open an existing one where you want to use Tailwind CSS.

Add an HTML boilerplate code to that HTML file

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS CDN Setup</title>
  </head>
  <body>
    <!-- OUR HTML CODE -->
  </body>
</html>

In the installation section, you will find the option to use the CDN. Copy the CDN link provided under the "Using a CDN" heading. The link should look something like this:

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

Paste the copied script tag into the <head> section of your HTML file. It should look like this

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS CDN Setup</title>
    <!-- TAILWIND CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- OUR HTML CODE -->
  </body>
</html>

The setup process is done 😎, Now just use tailwind css classes inside the index.html
Here is an example:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS CDN Setup</title>
    <!-- TAILWIND CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- OUR HTML CODE -->
    <div class="flex justify-center items-center h-screen">
      <div
        class="bg-gray-800 text-white font-bold rounded-lg border shadow-lg p-10"
      >
        Tailwind CSS CDN Setup
      </div>
    </div>
  </body>
</html>

Output:

OR simply clone this GitHub repository:

For a more detailed article refer to the following:

PreviousHistory of Tailwind CSS NextInstallation via Tailwind CLI

Last updated 1 year ago

Was this helpful?

Tailwind CSS Project setup using a CDN (Content Delivery Network)

The Play CDN is designed for development purposes only and is not the best choice for production.

For production, you can use other options like Tailwind CLI, Using PostCSS which we will see later.

✅ Steps to follow to complete Tailwind CSS Setup Successfully

Start by creating a new HTML file or open an existing one where you want to use Tailwind CSS.

Add an HTML boilerplate code to that HTML file

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS CDN Setup</title>
  </head>
  <body>
    <!-- OUR HTML CODE -->
  </body>
</html>

Open the Tailwind CSS website () in your browser and navigate to the "Installation" section.
In the installation section, you will find the option to use the CDN. Copy the CDN link provided under the "Using a CDN" heading. The link should look something like this:

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

Paste the copied script tag into the <head> section of your HTML file. It should look like this

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS CDN Setup</title>
    <!-- TAILWIND CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- OUR HTML CODE -->
  </body>
</html>

The setup process is done 😎, Now just use tailwind css classes inside the index.html
Here is an example:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS CDN Setup</title>
    <!-- TAILWIND CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- OUR HTML CODE -->
    <div class="flex justify-center items-center h-screen">
      <div
        class="bg-gray-800 text-white font-bold rounded-lg border shadow-lg p-10"
      >
        Tailwind CSS CDN Setup
      </div>
    </div>
  </body>
</html>

Output:

OR simply clone this GitHub repository:

GitHub - prahladinala/simple-tailwind-cdn-starter: Simple Tailwind Starter Setup using Tailwind CDNGitHub

For a more detailed article refer to the following:

Tailwind CSS - Prahlad Inala BlogPrahlad Inala