Author: M Abo Bakar Aslam

Integration of Tailwind CSS with HTML

Integration of Tailwind CSS with HTML involves applying utility-first styling directly within HTML files. In this tutorial, two simple methods are discussed. First is based on prebuilt Tailwind CSS file for offline usage, and second is based on CDN approach for quick setup without installation. These methods help beginners easily start working with Tailwind CSS and understand how to apply its classes efficiently in real projects.

Method 1: Using prebuilt CSS sheet for Tailwind CSS

Step 1: Download prebuilt-sheets for Tailwind CSS by clicking on below button

Step 2: In the same directory where index.html exist, create a folder named as styles.

Step 3: In styles folder, paste above downloaded file and extract the file. After extraction, file will be look as tailwind-all.css.

Step 4: Link this file to your HTML files. As in below code, we linked the CSS-file with index.html.

<!--File: index.html-->
<!DOCTYPE html>
 
<html>
    <head>
        <title>Home - Web Development Course</title>
        <link rel="stylesheet" href="./styles/tailwind-all.css" />
    </head>
    <body>
        <!-- Home Page -->
        <h1>Web Development - Course</h1>
        <p>Basics concepts related to Web Development Technologies like HTML, CSS, Tailwind CSS and JavaScript</p>
        <a href="https://www.edu2skill.com" target="_blank">Course Website</a>
        
        <h1 class="text-green-300 text-center">Test Tailwind CSS</h1>
    </body>
</html>

Step 5: In the same directory where index.html file exists, create a new file named as tailwind.config.js and paste below code in this newly-created file

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Method 2: Using CDN provided by Tailwind CSS

Limitation: Internet connection must be established whenenve page is loaded.

Step 1: Add below two lines at bottom of those HTML files in which you want to use Tailwind CSS Classes.

<style type="text/tailwindcss"></style>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

For Example, these lines are added in index.html file. Lines are heighted.

<!--File: index.html-->
<!DOCTYPE html>
 
<html>
    <head>
        <title>Home - Web Development Course</title>
    </head>
    <body>
        <!-- Home Page -->
        <h1>Web Development - Course</h1>
        <p>Basics concepts related to Web Development Technologies like HTML, CSS, Tailwind CSS and JavaScript</p>
        <a href="https://www.edu2skill.com" target="_blank">Course Website</a>
        
        <h1 class="text-red-300 text-center">Test Tailwind CSS</h1>
 
        <style type="text/tailwindcss"></style>
        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    </body>
</html>