プレーンな 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 を実行します。

• ページのファイル (例:index.php) に public/styles.css へのリンクを含めます:
  

<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 中国語 Web サイトの他の関連記事を参照してください。