Tailwind css を Laravel-mix で使用する

1. Laravel-mix のインストール

npm install laravel-mix cross-env --save-dev

Mac で laravel-mix インストール時にエラーが出る場合は次のリンクが参考になります。
https://qiita.com/hppRC/items/a01e33a5c890f7b2c125

2. package.jsonの追加

vi package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0"
    }
}

3. webpack.mix.jsの新規作成

vi webpack.mix.js

const mix = require('laravel-mix');

// OFF mix.js('resources/js/app.js', 'public/js')
mix.sass('./src/assets/scss/app.scss', './dist/assets/css/app.css');

4. Laravel-mix で scss → css コンパイルの実行

元ファイル app.scss → 出力ファイル app.css のコンパイルを行います。

元ファイル

├── src
│   └── assets
│       └── scss
│           └── app.scss

出力ファイル

├── dist
│   └── assets
│       └── css
│           └── app.css

実行コマンド

npm run dev

これで app.css が出力されます。

●3 Tailwind css のカスタマイズ

1. 設定ファイル tailwind.config.js をコマンドから生成する

npx tailwindcss init

tailwind.config.js が自動生成されます。

設定方法はこちらが詳しいです : https://bit.ly/3l56Nr6

2. 設定ファイル tailwind.config.js をコマンドから生成する

1. インストール

npm install laravel-mix cross-env --save-dev
npm install tailwindcss
npx tailwindcss init

2. 設定ファイルの用意

package.json を以下の内容で新規作成する

{
  "scripts": {
    "build-tailwind": "tailwind build css/tailwind-base.css -c tailwind.config.js -o css/tailwind.css",
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
    "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.26.10",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "dependencies": {
    "tailwindcss": "^1.7.2"
  }
}

tailwind.config.js を以下の内容で新規作成する

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

引用 : https://bit.ly/3j2qGxb

https://bit.ly/3hdqlqX

https://bit.ly/3heceBD