How To Use Tailwind CSS With A Plain PHP Project

(Image Source)

To start using Tailwind CSS with your plain PHP project, you can install Tailwind CSS in your project. This is how:

• Run npm init -y in the terminal.

• Install Tailwind dependencies: npm install tailwindcss postcss autoprefixer

• Generate Tailwind configuration file: npx tailwindcss init

• Create a postcss.config.js file and add this code:
  

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

• Create a folder called src and a styles.css file with this code:

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

• Add a build script to your package.json:

  "scripts": {
    "build:css": "npx postcss src/styles.css -o public/styles.css"
  },

• Run npm run build:css in the terminal.

• Include a link to the public/styles.css in your page’s file (example: index.php):
  

<link href="./public/styles.css" rel="stylesheet">

• Make sure you run npm run build:css after making changes.

• Also, make sure your tailwind.config.js includes the paths to your .php and .html files:
  

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

Happy Coding Folks!