CODEWITHSUNDEEP
phptailwind-css
Saif71
Saif71

Reputation: 577

How to use TailwindCSS with simple plain PHP project?

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

Upvotes: 13

Views: 33780

Answers (5)

Yoko Hailemariam
Yoko Hailemariam

Reputation: 47

for some reason when you start your server it can't load the css file inside your dist folder but in very traditional way what you can do is copy the css code into your html header inside style tag and it works fine

Upvotes: -3

Nadim
Nadim

Reputation: 131

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">)

Upvotes: 13

Muhammad Anas
Muhammad Anas

Reputation: 108

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>

Upvotes: 0

Irakli Shalamberidze
Irakli Shalamberidze

Reputation: 320

Simply add this script in html head:

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

Upvotes: 1

Hiisma
Hiisma

Reputation: 51

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.

Upvotes: 5

Related Questions