tailwindCSS導入 - dumin-project @ ウィキ

npxで導入する

ルートディレクトリに入る

docker exec -it myapp-php bash

npxでインストール

oot@bfff14c6a46d:/var/www# npm install tailwindcss postcss autoprefixer

このように表示される。※ただの宣伝の文言

dded 139 packages, and audited 140 packages in 39s

36 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

36 のパッケージが資金を求めています
  詳細については「npm Fund」を実行してください

0件の脆弱性が見つかりました

tailwindを初期化する

npx tailwindcdd init

tailwindの設定ファイルが自動生成される。

Created Tailwind CSS config file: tailwind.config.js

## tailwindの設定ファイルに記述する

/* @type {import('tailwindcss').Config} / export default { content: [], theme: { extend: {}, }, plugins: [], }

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import tailwindcss from 'tailwindcss'

export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), ], server: { host: true, hmr: { host: 'localhost', }, }, css: { postcss: { plugins: [ tailwindcss(), ], }, }, });