Installation & Setup Guide of Tailwind CSS with PHP
Last Updated : 25 Jul, 2024
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>
PHP <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 class="text-3xl font-bold underline bg-slate-500 p-5 text-blue-300"> Tailwindcss using Play CDN </h1> <script src="https://cdn.tailwindcss.com"></script> </body> </html>
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.
PHP <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="output.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html>
and Go to the browser and type localhost/foldername.
Output:
Method 3: Use Tailwindcss Standalone
Step 1: Download Tailwind CSS Standalone CLI
Download the Tailwind CSS standalone CLI from the official Tailwind CSS website.
Step 2: Set Up a CodeIgniter Project
Download and Install CodeIgniter:
- Go to the CodeIgniter website and download the latest version.
- Move the extracted CodeIgniter files to your web server directory (htdocs for XAMPP or www for WAMP).
- Rename the folder to your project name (e.g., my_project) .This step is optional.
Set Up Your Project:
- Configure your web server to serve the CodeIgniter project (e.g., using Apache or Nginx).
- Make sure the base_url in application/config/config.php is set correctly.
- base_url is http://localhost/your_project_dir_name
Step 3: Create the Tailwind CSS Stylesheet
1. Create a Tailwind CSS Configuration File:
- Open a terminal in your project directory.
- Run the following command to create a Tailwind configuration file:
npx tailwindcss init
This will create a tailwind.config.js file in your project.
2. Create the Tailwind Input File:
Create the public Folder:
- At the root of your CodeIgniter project (where you have the application, system, and user_guide folders), create a new folder named public.
Create the css Directory:
- Inside the public folder, create a new folder named css.
- Inside the css folder, create a file named tailwind-input.css.
//public/css/tailwind-input.css @tailwind base; @tailwind components; @tailwind utilities;
3. Build the Tailwind CSS File:
- Use the Tailwind CLI to build the CSS file:
npx tailwindcss -i ./public/css/tailwind-input.css -o ./public/css/tailwind-output.css --watch
This will generate a tailwind-output.css file in the public/css directory.
Step 4: Set Up the View in CodeIgniter
1. Create a View File:
- In the application/views directory, create a file named layout.php.
PHP //application/views/layout.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="<?= base_url('public/css/tailwind-output.css') ?>" rel="stylesheet"> </head> <body> <div> <h1 class="text-4xl font-bold text-center"> Hello, Tailwind CSS with CodeIgniter! </h1> </div> </body> </html> 2. Create a Controller:
- In the application/controllers directory, create a file named Welcome.php (If not exist).
PHP //application/controllers/Welcome.php <?php defined('BASEPATH') OR exit('No direct script access allowed'); class Welcome extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper('url'); } public function index() { $this->load->view('layout'); } } Step 5: Test the Setup
Start Your Web Server:
- Ensure your web server is running and serving the CodeIgniter project.
Access the Application:
- Open your browser and navigate to your CodeIgniter project's base URL (e.g., http://localhost/your-project-name).
You should see a page with a styled heading, confirming that Tailwind CSS is working correctly with your CodeIgniter view.
Output:
Final output