Installation & Setup Guide of Tailwind CSS with PHP

TailwindCSS is an open-source “Utility-first framework” of CSS(Cascading style sheet). It contains tons of features. You can use its Utility classes to design Web pages without writing any single-line CSS. It’s way much better than any other CSS framework like Bootstraps, Bulma, etc. You just have to use it directly in your markup.

PHP is a server-side scripting language used to manage the Back-end of the Web Application. It is open-source which means it is free to download and use.

It’s quite challenging to use TailwindCSS with PHP but it’s possible. Some People want to get rid of Bootstrap and want to shift to Tailwind but face the challenge of how to integrate it. If we talk about HTML, it’s quite simple to use because tailwind postCSS and CLI directly support HTML but not php.

In this article, we will learn how to set up Tailwind CSS with PHP. Before installing Tailwind CSS, make sure you have node and npm installed.

Make sure your xampp is installed on your desktop and Apache and MySQL are running in xampp server.

So there are 2 ways to Install & Setup Guide to install TailwindCSS with PHP:

Method 1: Put the PlayCDN script directly into the PHP file and run it directly:

Create a new File named index.php in xampp/htdocs folder.

Now at the Following CDN command in the last of the HTML body section.

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

Go to the browser and type localhost/foldername.

Output:

 

But for Production, CDN is not recommended. 

Method 2: By Using CLI with a small modification: You can use TailwindCSS with PHP easily by following these steps.

Create a Brand New folder and Open that folder with any Code Editor. For Example: VS code, Atom, Sublime, etc.

Step 1. Create a new File named index.php in xampp/htdocs folder.

 

Step 2: Install TailwindCSS: Use Terminal to install Tailwindcss by following these commands.

Copy the following command and paste it into the VC code terminal in the folder directory you created earlier.

npm install -D tailwindcss

Step 3:  Create TailwindCSS config file: Copy and Paste this command into the Terminal to create TailwindCSS config File

npx tailwindcss init

This command will create one file named as tailwind.config.js.

 

Step 4: Configure the tailwind.config.js file: Open the tailwind.config.js file and replace the existing code with this code.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["*/*.{html,js,php}"],
     theme: {
       extend: {},
 },
     plugins: [],
}

Step 5: Add the Tailwind directives to your CSS: create an input.css file in the folder(directory).

Paste the following code into it.

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

Now, link that input.css file in index.php that we created earlier.

Step 6: Start the Tailwind CLI build process: run the following command in the Terminal.

npx tailwindcss -i input.css -o output.css --watch

Project Structure:

 

Step 7: Check if the Setup is running: Copy and paste the following code in the index.php file to check if the Code is running and save it.

and Go to the browser and type localhost/foldername.

Output: