● Tailwind css と Alpine.js で 複数選択ドロップダウンリスト

https://codepen.io/oidre/pen/bGEbVXo

● Tailwind CSS で checkbox のスタイルを使用する

npm install @tailwindcss/custom-forms --save-dev

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/custom-forms'),
  ]
}

npm run build-tailwind

Tailwind CSS IntelliSense

https://laravel-news.com/tailwind-css-intellisense

● laravel-frontend-presets / tailwindcss

https://github.com/laravel-frontend-presets/tailwindcss

1. php artisan ui tailwindcss --auth

2. npm install && npm run dev  

3. Configure your favorite database (mysql, sqlite etc.)

4. php artisan migrate to create basic user tables.

5. php artisan serve (or equivalent) to run server and test preset

●1 Tailwind css の最小セットでインストールしてcssを生成する

1. インストール

npm install --save-dev tailwindcss purgecss

2. 設定ファイル tailwind.config.js を用意する

vi tailwind.config.js

tailwind.config.js を次の内容で保存します。

module.exports = {
  purge: ['./**/*.html'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

3. 元となる style.cssファイルを用意

vi style.css

style.css を次の内容で保存します。

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

4. output.css を作成

tailwind.css を作成して完成です

npx tailwind build style.css -o tailwind.css

tailwind.css が生成されていれば動作OKです！

ただし、ファイルサイズが 2MB ほどあります。 そこで、 purgecss を使って使用していないプロパティを削除しながら生成します。

ファイルサイズを小さくして tailwind.css を作成

NODE_ENV=production npx tailwind build style.css -o tailwind.css

5. npm コマンドに登録

package.json　に次のように記述しておくとコマンド　

npm run build-tailwind
npm run build-tailwind-prod

で実行することができます

  "scripts": {
    "build-tailwind": "npx tailwind build  ./src/assets_front/tailwind/tailwind_input.css -o ./src/assets_front/scss/tailwind/_tailwind.scss" ,
    "build-tailwind-prod": "NODE_ENV=production  npx tailwind build  ./src/assets_front/tailwind/tailwind_input.css -o ./src/assets_front/scss/tailwind/_tailwind.scss"
  },

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