How to use TailwindCSS with simple plain PHP project?

Viewed 2230

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
3 Answers

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.

Simply add this script in html head:

 <script src="https://cdn.tailwindcss.com"></script>

You can use tailwind css by including its CDN

<script src="https://cdn.tailwindcss.com"></script>

and then include defined classes as

<h1 class="text-3xl font-bold underline"> Hello world! </h1>
Related