일반 PHP 프로젝트에서 Tailwind CSS를 사용하는 방법

(이미지 출처)

일반 PHP 프로젝트에서 Tailwind CSS를 사용하려면 프로젝트에 Tailwind CSS를 설치하면 됩니다. 방법은 다음과 같습니다.

• 터미널에서 npm init -y를 실행하세요.

• Tailwind 종속성 설치: npm install tailwindcss postcss autoprefixer

• Tailwind 구성 파일 생성: npx tailwindcss init

• postcss.config.js 파일을 만들고 다음 코드를 추가하세요.
  

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

• 다음 코드를 사용하여 src라는 폴더와 styles.css 파일을 만듭니다.

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

• package.json에 빌드 스크립트를 추가합니다.

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

• 터미널에서 npm run build:css를 실행하세요.

• 페이지 파일에 public/styles.css에 대한 링크를 포함하세요(예: index.php):
  

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

• 변경 후에는 반드시 npm run build:css를 실행하세요.

• 또한 tailwind.config.js에 .php 및 .html 파일에 대한 경로가 포함되어 있는지 확인하세요.
  

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

모두들 즐거운 코딩하세요!

위 내용은 일반 PHP 프로젝트에서 Tailwind CSS를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!