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 astyles.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!
Top comments (0)