DEV Community

It's Just Nifty
It's Just Nifty

Posted on • Originally published at niftylittleme.com on

How To Use Tailwind CSS With A Plain PHP Project

(Image Source)

Image from Nathan da Silva on Unsplash

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'),
  ],
};
Enter fullscreen mode Exit fullscreen mode
  • Create a folder called src and a styles.css file with this code:
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • Add a build script to your package.json:
  "scripts": {
    "build:css": "npx postcss src/styles.css -o public/styles.css"
  },
Enter fullscreen mode Exit fullscreen mode
  • 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">
Enter fullscreen mode Exit fullscreen mode
  • 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: [],
}
Enter fullscreen mode Exit fullscreen mode

Happy Coding Folks!

Top comments (0)