How to use TailwindCSS with simple plain PHP project?

Question

I have a pretty basic PHP project. Written in plain PHP without any framework. It just fetches some data from DB and prints as a list. I wanted to use TailwindCSS in this project but I can't figure out a working way to do so. The official docs cover the Laravel version but as I said, I'm not using any frameworks or package managers (like composer)

I tried this doc: https://tailwindcss.com/docs/installation/using-postcss and added PHP extension in tailwind.config.js, but doesn't work.

Can anyone help me with a working solution? Here is a sample structure of my project.

.
└── src/
    ├── css
    ├── js
    ├── index.php
    ├── db.php
    ├── header.php
    ├── footer.php
    └── sidebar.php

Answer 1

If you don't have or don't want to install node, Tailwind has a standalone CLI : https://tailwindcss.com/blog/standalone-cli

The installation instructions are mostly the same as if installing from npm ( https://tailwindcss.com/docs/installation ) with minor differences as follows

1. Download the cli for the preferred version of Tailwind and for the correct operating system from here: https://github.com/tailwindlabs/tailwindcss/releases

2. Copy it to your project root directory and rename it to tailwindcss

3. Open your project root directory in terminal/command-line and run the command ./tailwindcss init ,this will create tailwind.config.js file

4. Add the paths to all of your template files in your tailwind.config.js file inside the content array (e.g. "./src/**/*.php", more details https://tailwindcss.com/docs/content-configuration)

5. In your css folder create input.css file and add the following in it @tailwind base; @tailwind components; @tailwind utilities;

6. Run this command in terminal/command-line ./tailwindcss -i ./src/css/input.css -o ./src./css/output.css --watch (input and output file names and paths can be different, this will also create the directory and output.css file if not available)

7. Add a link in tag to output.css file (e.g. <link rel="stylesheet" href="./src/css/output.css">)

Answer 2

I've been using TailwindCSS with plain php successfully. Actually I followed the cli documentation and it worked wonderfully. While using the CLI remember to compile it every time with:

npx tailwindcss -i ./src/input.css -o ./dist/output.css

where input.css is your tailwind css and output.css the one that you have to import in your php\html files.

Also you may need to have tailwind.config.js configured. You can generate the default one using this command:

npx tailwindcss init --full

By using it it should work out of the box.

I hope it works. Cheers and happy coding.