tailwindの遊び方

● Tailwind CSS を試すのにいいサイト

https://play.tailwindcss.com/

こちらで色々作成して share します

・ 丸いボタン

https://play.tailwindcss.com/5KVNLS5AZa

● @media レスポンシブに対応するメディアクエリ

https://tailwindcss.com/docs/responsive-design

Breakpoint prefixMinimum widthCSS
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

Tailwind CSS でよく使うクラス(サイズ編)|Tailwind CSS 入門と実践

No.2426
12/10 10:00

edit

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

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

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

No.1943
01/17 21:40

edit

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

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

npm install @tailwindcss/custom-forms --save-dev
// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/custom-forms'),
  ]
}
npm run build-tailwind
No.1864
09/27 14:10

edit

No.1856
09/13 08:59

edit

Laravel の auth を Tailwind で作成する

● 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
No.1844
08/24 14:35

edit

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

●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"
  },
No.1840
08/24 08:25

edit

Tailwind css を Laravel-mix で使用する

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

No.1843
08/24 08:25

edit