Installation & Setup Guide of Tailwind CSS with PHP
Last Updated :
23 Jul, 2025
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/3.4.16"></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/3.4.16"></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
Similar Reads
PHP Tutorial PHP is a popular, open-source scripting language mainly used in web development. It runs on the server side and generates dynamic content that is displayed on a web application. PHP is easy to embed in HTML, and it allows developers to create interactive web pages and handle tasks like database mana
9 min read
Basics
PHP SyntaxPHP, a powerful server-side scripting language used in web development. Itâs simplicity and ease of use makes it an ideal choice for beginners and experienced developers. This article provides an overview of PHP syntax. PHP scripts can be written anywhere in the document within PHP tags along with n
4 min read
PHP VariablesA variable in PHP is a container used to store data such as numbers, strings, arrays, or objects. The value stored in a variable can be changed or updated during the execution of the script.All variable names start with a dollar sign ($).Variables can store different data types, like integers, strin
5 min read
PHP | FunctionsA function in PHP is a self-contained block of code that performs a specific task. It can accept inputs (parameters), execute a set of statements, and optionally return a value. PHP functions allow code reusability by encapsulating a block of code to perform specific tasks.Functions can accept param
8 min read
PHP LoopsIn PHP, Loops are used to repeat a block of code multiple times based on a given condition. PHP provides several types of loops to handle different scenarios, including while loops, for loops, do...while loops, and foreach loops. In this article, we will discuss the different types of loops in PHP,
4 min read
Array
PHP ArraysArrays are one of the most important data structures in PHP. They allow you to store multiple values in a single variable. PHP arrays can hold values of different types, such as strings, numbers, or even other arrays. Understanding how to use arrays in PHP is important for working with data efficien
5 min read
PHP Associative ArraysAn associative array in PHP is a special array where each item has a name or label instead of just a number. Usually, arrays use numbers to find things. For example, the first item is at position 0, the second is 1, and so on. But in an associative array, we use words or names to find things. These
4 min read
Multidimensional arrays in PHPMulti-dimensional arrays in PHP are arrays that store other arrays as their elements. Each dimension adds complexity, requiring multiple indices to access elements. Common forms include two-dimensional arrays (like tables) and three-dimensional arrays, useful for organizing complex, structured data.
5 min read
Sorting Arrays in PHPSorting arrays is one of the most common operation in programming, and PHP provides a several functions to handle array sorting. Sorting arrays in PHP can be done by values or keys, in ascending or descending order. PHP also allows you to create custom sorting functions.Table of ContentSort Array in
4 min read
OOPs & Interfaces
MySQL Database
PHP | MySQL Database IntroductionWhat is MySQL? MySQL is an open-source relational database management system (RDBMS). It is the most popular database system used with PHP. MySQL is developed, distributed, and supported by Oracle Corporation. The data in a MySQL database are stored in tables which consists of columns and rows.MySQL
4 min read
PHP Database connectionThe collection of related data is called a database. XAMPP stands for cross-platform, Apache, MySQL, PHP, and Perl. It is among the simple light-weight local servers for website development. Requirements: XAMPP web server procedure: Start XAMPP server by starting Apache and MySQL. Write PHP script f
2 min read
PHP | MySQL ( Creating Database )What is a database? Database is a collection of inter-related data which helps in efficient retrieval, insertion and deletion of data from database and organizes the data in the form of tables, views, schemas, reports etc. For Example, university database organizes the data about students, faculty,
3 min read
PHP | MySQL ( Creating Table )What is a table? In relational databases, and flat file databases, a table is a set of data elements using a model of vertical columns and horizontal rows, the cell being the unit where a row and column intersect. A table has a specified number of columns, but can have any number of rows. Creating a
3 min read
PHP Advance
PHP SuperglobalsPHP superglobals are predefined variables that are globally available in all scopes. They are used to handle different types of data, such as input data, server data, session data, and more. These superglobal arrays allow developers to easily work with these global data structures without the need t
6 min read
PHP | Regular ExpressionsRegular expressions commonly known as a regex (regexes) are a sequence of characters describing a special search pattern in the form of text string. They are basically used in programming world algorithms for matching some loosely defined patterns to achieve some relevant tasks. Some times regexes a
12 min read
PHP Form HandlingForm handling is the process of collecting and processing information that users submit through HTML forms. In PHP, we use special tools called $_POST and $_GET to gather the data from the form. Which tool to use depends on how the form sends the dataâeither through the POST method (more secure, hid
4 min read
PHP File HandlingIn PHP, File handling is the process of interacting with files on the server, such as reading files, writing to a file, creating new files, or deleting existing ones. File handling is essential for applications that require the storage and retrieval of data, such as logging systems, user-generated c
4 min read
PHP | Uploading FileHave you ever wondered how websites build their system of file uploading in PHP? Here we will come to know about the file uploading process. A question which you can come up with - 'Are we able to upload any kind of file with this system?'. The answer is yes, we can upload files with different types
3 min read
PHP CookiesA cookie is a small text file that is stored in the user's browser. Cookies are used to store information that can be retrieved later, making them ideal for scenarios where you need to remember user preferences, such as:User login status (keeping users logged in between sessions)Language preferences
9 min read
PHP | SessionsA session in PHP is a mechanism that allows data to be stored and accessed across multiple pages on a website. When a user visits a website, PHP creates a unique session ID for that user. This session ID is then stored as a cookie in the user's browser (by default) or passed via the URL. The session
7 min read