Tailwind CSS CDN Issue

This repository demonstrates a common issue encountered when using Tailwind CSS via a CDN link: classes not being applied. The issue is resolved by using a local installation of Tailwind CSS, which correctly processes and applies the styles.

Problem

When including Tailwind CSS via a CDN link (as shown in index.html), the styles defined by the Tailwind classes are not applied, resulting in the div element not having the expected red background.

Solution

The solution involves installing Tailwind CSS locally. This ensures that the build process correctly processes your styles and applies them to your HTML. This is done by creating a tailwind.config.js and running the necessary Tailwind commands to setup and build the CSS.

Setup

1. Install Node.js and npm: Ensure you have Node.js and npm (or yarn) installed on your system.
2. Create a new project: Create a new directory for your project and navigate to it in your terminal.
3. Initialize Node.js project: Run npm init -y to create a package.json file.
4. Install Tailwind CSS: Run npm install -D tailwindcss postcss autoprefixer
5. Configure Tailwind: Run npx tailwindcss init -p
6. Add Tailwind directives: Add @tailwind base; @tailwind components; and @tailwind utilities; into your index.html stylesheet section.
7. Update your HTML: Replace the CDN link with your local CSS file
8. Build and run the project: Run the commands listed in your tailwind.config.js to build your CSS.

This approach ensures that Tailwind CSS classes are correctly applied, resolving the styling issue.