TailwindUIのFormの見た目がサンプル通りにならない

困ったこと

同じスタイルクラスを当ててるはずなのに、見た目が違う。

理想の見た目

実際の見た目

対応内容

たぶん次のどっちかやればええんちゃうか

https://github.com/tailwindlabs/tailwindcss-forms
https://tailwindcss-custom-forms.netlify.app/

1個目のほうをインストールしたけど怒られた

terminal

ERROR in ./node_modules/tippy.js/animations/perspective.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/tippy.js/animations/perspective.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'none' of undefined
    at /Users/XXXXXXX/projects/XXXXX/node_modules/@tailwindcss/forms/src/index.js:38:26
    at /Users/XXXXXXX/projects/XXXXX/node_modules/tailwindcss/lib/util/processPlugins.js:66:5
    at Array.forEach (<anonymous>)
    at _default (/Users/XXXXXXX/projects/XXXXX/node_modules/tailwindcss/lib/util/processPlugins.js:60:11)
    at /Users/XXXXXXX/projects/XXXXX/node_modules/tailwindcss/lib/processTailwindFeatures.js:56:54
    at LazyResult.run (/Users/XXXXXXX/projects/XXXXX/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/Users/XXXXXXX/projects/XXXXX/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/Users/XXXXXXX/projects/XXXXX/node_modules/postcss/lib/lazy-result.js:225:14)
    at /Users/XXXXXXX/projects/XXXXX/node_modules/postcss/lib/lazy-result.js:217:17

ERROR in ./app/javascript/css/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./app/javascript/css/tailwind.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: getProcessedPlugins is not a function
    at /Users/XXXXXXX/projects/XXXXX/node_modules/tailwindcss/lib/processTailwindFeatures.js:67:83
    at LazyResult.run (/Users/XXXXXXX/projects/XXXXX/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/Users/XXXXXXX/projects/XXXXX/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/Users/XXXXXXX/projects/XXXXX/node_modules/postcss/lib/lazy-result.js:225:14)
    at /Users/XXXXXXX/projects/XXXXX/node_modules/postcss/lib/lazy-result.js:217:17
ℹ ｢wdm｣: Failed to compile.

Tailwind CSS v2.0. 用だからかな？？

Tailwind CSS v2.0インストール

下記を元に2.0を入れる
https://tailwindcss.com/docs/installation

Terminal

npm install tailwindcss@latest postcss@latest autoprefixer@latest

下記怒られる。

Terminal

> % bin/webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:3035/
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /Users/XXX/projects/XXX/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: wait until bundle finished: /packs/js/application-83db7df6641884880765.js
✖ ｢wdm｣: Hash: f6dfc3f28099b484dcf6
Version: webpack 4.44.2
Time: 3149ms
Built at: 2021-01-13 7:49:08
                                     Asset       Size       Chunks                         Chunk Names
    js/application-83db7df6641884880765.js   1.88 MiB  application  [emitted] [immutable]  application
js/application-83db7df6641884880765.js.map   1.92 MiB  application  [emitted] [dev]        application
                             manifest.json  364 bytes               [emitted]              

ERROR in ./app/javascript/css/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./app/javascript/css/tailwind.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8. Update PostCSS or downgrade this plugin.
    at Processor.normalize (/Users/XXX/projects/XXX/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/Users/XXX/projects/XXX/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/Users/XXX/projects/XXX/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
    at /Users/XXX/projects/XXX/node_modules/postcss-loader/src/index.js:140:12

ERROR in ./node_modules/tippy.js/animations/perspective.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/tippy.js/animations/perspective.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8. Update PostCSS or downgrade this plugin.
    at Processor.normalize (/Users/XXX/projects/XXX/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/Users/XXX/projects/XXX/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/Users/XXX/projects/XXX/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
    at /Users/XXX/projects/XXX/node_modules/postcss-loader/src/index.js:140:12

インストール方法にも書いてるが、こちらを参考にする。

Terminal

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

terminal

-> % npx tailwindcss init
  
   @tailwindcss/postcss7-compat 2.0.2
  
   🚫 tailwind.config.js already exists.

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

既に下記だった

app/javascript/css/tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

一行目追加

app/javascript/src/js/application.js

import 'tailwindcss/tailwind.css' 
import './dropdown.js'

もう一度、tailwindcss-formsインストールする

今見直したら、２つとも叩いたが、片方でいいと思う。

Terminal

-> % npm install @tailwindcss/forms
+ @tailwindcss/forms@0.2.1
added 2 packages from 1 contributor, removed 7 packages and audited 1824 packages in 8.861s
found 0 vulnerabilities

-> % yarn add @tailwindcss/forms
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > webpack-dev-server@3.11.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
├─ @tailwindcss/forms@0.2.1
├─ @tailwindcss/postcss7-compat@2.0.2
└─ tailwindcss@2.0.2
info All dependencies
├─ @tailwindcss/forms@0.2.1
├─ @tailwindcss/postcss7-compat@2.0.2
├─ mini-svg-data-uri@1.2.3
└─ tailwindcss@2.0.2
✨  Done in 19.76s.

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

結果

いい感じになった。