LoginSignup
1
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-13

困ったこと

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

理想の見た目

image.png

実際の見た目

image.png

対応内容

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

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インストールする

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

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'),
  ],
}

結果

いい感じになった。

image.png
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1