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

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

  1. 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>

  1. Open the Tailwind CSS website (https://tailwindcss.com/) in your browser and navigate to the "Installation" section.

  2. 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>

  1. 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>

  1. The setup process is done 😎, Now just use tailwind css classes inside the index.html

  2. 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:

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

For a more detailed article refer to the following:

LogoTailwind CSS - Prahlad Inala BlogPrahlad Inala
PreviousHistory of Tailwind CSSNextInstallation via Tailwind CLI

Last updated

Was this helpful?