[SOLVED] Adding tailwind in my PHP project using the tailwind CLI won't display the styles in the frotend. output.css is empty or icorrect

Adding tailwind in my PHP project using the tailwind CLI won't display the styles in the frotend. output.css is empty or icorrect

I am building my first PHP project and I want to use tailwindcss for the styling.

I am using the tailwind CLI so here is how I did it.

I downloaded the latest release from here. I use the tailwindcss-windows-x64.exe.
Copy the file to my project and rename it to tailwindcss.exe
Add the input.css file inside the public folder. public_html/assets/css/input.css

This is the content of the input.css file.

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

I also added another file called tailwind.config.js

module.exports = {
  content: ['./src/view/**/*.php'], // Scans all PHP files in src/view folder and subdirectories
  theme: {
    extend: {},
  },
  plugins: [],
};

Then run the command

tailwindcss.exe -i public_html/assets/css/input.css -o public_html/assets/css/output.css --w

That command will generate the output.css file nextto the input.css file.

When checking the output.css, I only see this content

/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
@tailwind base;
@tailwind components;

I tried adding the output.css file to my view file src/view/index.view.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/assets/css/output.css" />
</head>

<body>
  <div class="p-4 bg-green-300">Test</div>
</body>

</html>

I am seeing the suggested classes in VScode but I am not seeing the CSS styles being applied in the page.

This is my file structure

Solution

You seem to be following old v3 method of configuring Tailwind but you downloaded the v4 standalone executable.

Thus you could consider:

Configuring for Tailwind v4. At a minimum, this would include changing your public_html/assets/css/input.css to:
```
@import "tailwindcss";
```
Otherwise, you could consider downloading the latest v3 standalone executable. At the time of writing, this would be v3.4.17.