Question 8172 in PHP Versions Question posted in
You can find a list of all versions here.

How to use TailwindCSS with simple plain PHP project? – PHP Versions

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
Tags:

5

Answers


  1. 0

    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 phphtml 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.

    Login or Signup to reply.
  2. 0

    Simply add this script in html head:

     <script src="https://cdn.tailwindcss.com"></script>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

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

    Login or Signup to reply.
  5. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search