Reports

Option 1: Use the CDN (Quick & Easy, No Build Process)

Add the following CDN link inside the <head> tag of your index.html file:



    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tailwind CSS in HTML</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="bg-gray-100 text-center p-10">
        <h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind CSS in HTML!</h1>
    </body>
    </html>




Option 2: Install Tailwind via NPM (Recommended for IntelliSense & Customization)

If you want Tailwind IntelliSense to work in HTML, follow these steps:

1. Initialize a project (if you don’t have package.json already)

    npm init -y

2.Install Tailwind CSS locally

    npm install -D tailwindcss postcss autoprefixer

3.Generate a Tailwind config file

    npx tailwindcss init -p

4.Configure Tailwind to scan your HTML files (In tailwind.config.js, update the content section)

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

5.Create a CSS file for Tailwind (Inside your project folder, create a new file styles.css and add this)

        @tailwind base;
        @tailwind components;
        @tailwind utilities;

6.Build Tailwind CSS (Run the following command to generate a Tailwind-ready CSS file)

    npx tailwindcss -i ./styles.css -o ./dist/output.css --watch
79539482
