LoginSignup
24
18
@MIDO-ruby7

Tailwind cssと普通のcss,scssを併用するときの罠

Last updated at Posted at 2023-06-27

Rails7でTailwind cssと普通のcss,scssを併用したらハマった

ファイル構成.
app
    -assets
        -stylesheets
            -application.tailwind.css
            -application.scss
            -bubble.scss
            -top.css

ローカルでは普通に動いてたのでherokuにpush。そこから沼の始まり始まり……

SassC::SyntaxError: Internal Error: Invalid UTF-8

本番環境コンパイル系のエラー出るよね〜😇、とログを確認

rake aborted!
       SassC::SyntaxError: Internal Error: Invalid UTF-8
       /tmp/build_d0f9538b/vendor/bundle/ruby/3.2.0/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'
       /tmp/build_d0f9538b/vendor/bundle/ruby/3.2.0/gems/sassc-rails-
(中略）
1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:333:in `catch'
       /tmp/build_d0f9538b/vendor/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:333:in `block in create_worker'
       Tasks: TOP => assets:precompile
       (See full trace by running task with --trace)

 !
 !     Precompiling assets failed.
 !
 !     Push rejected, failed to compile Ruby app.
 !     Push failed

ググるとこちらの記事を発見

1.@charset "UTF-8";を追加 → 変化なし

app/assets/stylesheets/application.scss
@charset "UTF-8";

２.scssのコメントアウト確認 → コメントなしのため該当せず

３.コンパイルの書き出し元、書き出し先再確認

こういうときは公式を見るんだ。詳しいんだ俺は。

罠①：Tailwind cssとcss,Sassなどを併用するときはPostCSSを使用する必要がある

プリプロセッサとの併用
Sass、Less、Stylusのような一般的なCSSプリプロセッサとTailwindを使用するためのガイドです。
TailwindはPostCSSプラグインなので、Autoprefixerのような他のPostCSSプラグインと同じように、Sass、Less、Stylus、または他のプリプロセッサで使用することを妨げるものはありません。
通常、TailwindプロジェクトではCSSをほとんど書かないので、プリプロセッサを使うことは、カスタムCSSをたくさん書くプロジェクトほど有益ではありません。
このガイドは、Tailwindをプリプロセッサと統合する必要がある人のための参考として存在するだけであり、それが推奨される方法だからではありません。

PostCSS?え？そんなの使ってないし知らんけど？？？何それ？？？

プリプロセッサとしてPostCSSを使用する
Tailwindを全く新しいプロジェクトに使用し、既存のSass/Less/Stylusスタイルシートと統合する必要がない場合は、別のプリプロセッサを使用する代わりに、使用するプリプロセッサ機能を追加するために他のPostCSSプラグインに依存することを大いに考慮すべきです。
これにはいくつかの利点があります：
・ビルドが速くなります。CSSを複数のツールで解析・処理する必要がないため、PostCSSだけを使ってCSSをより速くコンパイルできます。
・癖や回避策がありません。TailwindはCSSに新しい非標準のキーワード（@tailwind、@apply、theme()など）を追加するため、プリプロセッサに期待通りの出力をさせるために、しばしば、煩わしく、直感的でない方法でCSSを書かなければなりません。PostCSSだけで作業すれば、このようなことは避けられます。
利用可能なPostCSSプラグインのかなり包括的なリストについては、PostCSSのGitHubリポジトリを参照してください。

ほえ〜じゃあこれ使わなきゃですね。

と思ったら3日前に既に導入していた様子。
3日前の俺、よくわからず記事の通りにやるんじゃない。公式を読め🥹

おかげでcssやscssが読み込めていた模様。

罠②：application.tailwind.cssの書き方

ただ、公式をさらに読むと

@import文が先でなければ動作しません。

❌.
@tailwind base;
@import "./custom-base-styles.css";
⭕️.
@import "tailwindcss/base";
@import "./custom-base-styles.css";

とあります。自分のファイルはこうなっていた

app/assets/stylesheets/application.tailwind.css
@tailwind components;
@tailwind utilities;

@import './top'
読み込めてないよね🥹？

参考にした記事は何も触れられてない…ローカルではよしなに働くのだろうか…。

私の場合どうやって読み込んでたかというと、manifest.jsに追記して<%= stylesheet_link_tag "top" %>とか<%= stylesheet_link_tag "application" %>として読み込んでました。エラーが出てこの辺を追記した記憶があるので、Railsの挙動自体もよく分かってないまま記載していました。

app/assets/config/manifest.js
//= link_tree ../images
//= link_tree ../builds
//= link application.tailwind.css
//= link top.css
//= link bubble.css
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html data-theme="mytheme">
  <head>
    <title>pf</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
    </script>
  </head>

  <body>
    略
  </body>
</html>

現状アセットパイプラインを利用する形でもローカル環境下では読み込めてはいるんですが、本番環境ではエラーになってる。それがなぜか調べていると、こんなissueを発見しました。

エラー内容
SassC::SyntaxError: Error: Function rgb is missing argument $green.
on line 1 of stdin
-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacit
調べたら、いくつかの推測があるようで、一旦明日で詳細確認する
It looks like for some reason your Tailwind compiled CSS is being fed into Sass and Sass doesn’t understand modern CSS color syntax (commaless rgb).
↑Tailwindが最新のcss構文を使っているが、SASSが最新のCSS構文を理解できていないことが原因だそう
同じような推測

ちょっとエラーは違いますが、TailwindとSASSやCSSが共存することで認識されなかったり読み込めない可能性がありそう。と言うことで、きちんと公式を読んで設定し直し、Tailwindもそれ以外もCSSは全てPostCSS経由で読み込まれるように直していく。

app/assets/stylesheets/application.tailwind.css
@import './top.css';
@import './bubble.scss';

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

Tailwind cssが効かなくなりました😇

罠③：コメントアウトが読み込まれてしまう

望み通り、.css、.scssは適用されてたんですけど、Tailwind cssのクラスが全部適用されなくなった。
ターミナルログも変な状態に

正しい挙動.
midori@takahashimidorinoMacBook-Air boozefolio % bin/dev
06:52:40 web.1  | started with pid 38696
06:52:40 js.1   | started with pid 38697
06:52:40 css.1  | started with pid 38699
06:52:40 js.1   | yarn run v1.22.19
06:52:40 css.1  | yarn run v1.22.19
06:52:40 js.1   | warning ../package.json: No license field
06:52:40 css.1  | warning ../package.json: No license field
06:52:40 css.1  | $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify --watch
06:52:40 js.1   | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --watch
06:52:40 js.1   | [watch] build finished, watching for changes...
06:52:40 web.1  | => Booting Puma
06:52:40 web.1  | => Rails 7.0.5 application starting in development 
06:52:40 web.1  | => Run `bin/rails server --help` for more startup options
06:52:41 css.1  | 
06:52:41 css.1  | Rebuilding...
06:52:41 web.1  | Puma starting in single mode...
06:52:41 web.1  | * Puma version: 5.6.5 (ruby 3.2.0-p0) ("Birdie's Version")
06:52:41 web.1  | *  Min threads: 5
06:52:41 web.1  | *  Max threads: 5
06:52:41 web.1  | *  Environment: development
06:52:41 web.1  | *          PID: 38698
06:52:41 web.1  | * Listening on http://127.0.0.1:3000
06:52:41 web.1  | * Listening on http://[::1]:3000
06:52:41 web.1  | Use Ctrl-C to stop
06:52:41 css.1  | 
06:52:41 css.1  | 🌼 daisyUI 3.1.1 https://daisyui.com
06:52:41 css.1  | ╰╮
06:52:41 css.1  |  ╰─ ✔︎ [ 1 ] theme is enabled. You can add more themes or make your own theme:
06:52:41 css.1  |       https://daisyui.com/docs/themes
06:52:41 css.1  | 
06:52:41 css.1  |     ❤︎ Support daisyUI: https://opencollective.com/daisyui
06:52:41 css.1  | 
06:52:41 css.1  | 
06:52:41 css.1  | Done in 680ms.
こわ〜い挙動.
midori@takahashimidorinoMacBook-Air boozefolio % bin/dev
06:45:42 web.1  | started with pid 38324
06:45:42 js.1   | started with pid 38325
06:45:42 css.1  | started with pid 38327
06:45:42 css.1  | yarn run v1.22.19
06:45:42 js.1   | yarn run v1.22.19
06:45:42 js.1   | warning ../package.json: No license field
06:45:42 css.1  | warning ../package.json: No license field
06:45:42 js.1   | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --watch
06:45:42 css.1  | $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify --watch
06:45:43 js.1   | [watch] build finished, watching for changes...
06:45:43 web.1  | => Booting Puma
06:45:43 web.1  | => Rails 7.0.5 application starting in development 
06:45:43 web.1  | => Run `bin/rails server --help` for more startup options
06:45:43 web.1  | Puma starting in single mode...
06:45:43 web.1  | * Puma version: 5.6.5 (ruby 3.2.0-p0) ("Birdie's Version")
06:45:43 web.1  | *  Min threads: 5
06:45:43 web.1  | *  Max threads: 5
06:45:43 web.1  | *  Environment: development
06:45:43 web.1  | *          PID: 38326
06:45:43 css.1  | CssSyntaxError: postcss-import: /Users/midori/workspace/pf/boozefolio/app/assets/stylesheets/top.css:52:1: Unexpected }
06:45:43 css.1  |     at Input.error (/Users/midori/workspace/pf/boozefolio/node_modules/tailwindcss/node_modules/postcss/lib/input.js:148:16)
06:45:43 css.1  |     at Parser.unexpectedClose (/Users/midori/workspace/pf/boozefolio/node_modules/tailwindcss/node_modules/postcss/lib/parser.js:548:22)
06:45:43 css.1  |     at Parser.end (/Users/midori/workspace/pf/boozefolio/node_modules/tailwindcss/node_modules/postcss/lib/parser.js:379:12)
06:45:43 css.1  |     at Parser.parse (/Users/midori/workspace/pf/boozefolio/node_modules/tailwindcss/node_modules/postcss/lib/parser.js:56:16)
06:45:43 css.1  |     at parse (/Users/midori/workspace/pf/boozefolio/node_modules/tailwindcss/node_modules/postcss/lib/parse.js:11:12)
06:45:43 web.1  | * Listening on http://127.0.0.1:3000
06:45:43 css.1  |     at new LazyResult (/Users/midori/workspace/pf/boozefolio/node_modules/tailwindcss/node_modules/postcss/lib/lazy-result.js:133:16)
06:45:43 web.1  | * Listening on http://[::1]:3000
06:45:43 css.1  |     at Processor.process (/Users/midori/workspace/pf/boozefolio/node_modules/tailwindcss/node_modules/postcss/lib/processor.js:28:14)
06:45:43 css.1  |     at runPostcss (/Users/midori/workspace/pf/boozefolio/node_modules/postcss-import/lib/process-content.js:48:6)
06:45:43 css.1  |     at processContent (/Users/midori/workspace/pf/boozefolio/node_modules/postcss-import/lib/process-content.js:42:10)
06:45:43 css.1  |     at /Users/midori/workspace/pf/boozefolio/node_modules/postcss-import/index.js:382:20 {
06:45:43 css.1  |   reason: 'Unexpected }',
06:45:43 css.1  |   file: '/Users/midori/workspace/pf/boozefolio/app/assets/stylesheets/top.css',
06:45:43 css.1  |   source: '.box {\n' +
06:45:43 css.1  |     '  width: 100%;\n' +
06:45:43 css.1  |     '  height: 100%;\n' +
06:45:43 css.1  |     '  background: #fbfcee;\n' +
06:45:43 css.1  |     '  position: relative;\n' +
06:45:43 css.1  |     '  overflow: hidden;\n' +
06:45:43 css.1  |     '  -webkit-transform: translate3d(0, 0, 0);\n' +
06:45:43 css.1  |     '  transform: translate3d(0, 0, 0);\n' +
06:45:43 css.1  |     '}\n' +
06:45:43 css.1  |     '\n' +
06:45:43 css.1  |     '.wave {\n' +
06:45:43 css.1  |     '  opacity: .4;\n' +
06:45:43 css.1  |     '  position: absolute;\n' +
06:45:43 css.1  |     '  top: 60%;\n' +

なんかcssの中身がターミナルに全部記載されてるんやで〜〜〜😇

06:45:43 css.1  |       '.g_id_signin {\n' +
06:45:43 css.1  |       '  z-index: 12;\n' +
06:45:43 css.1  |       '}',
06:45:43 css.1  |     url: 'file:///Users/midori/workspace/pf/boozefolio/app/assets/stylesheets/top.css',
06:45:43 css.1  |     file: '/Users/midori/workspace/pf/boozefolio/app/assets/stylesheets/top.css'
06:45:43 css.1  |   },
06:45:43 css.1  |   plugin: 'postcss-import'
06:45:43 css.1  | }
06:45:46 web.1  | Started GET "/" for ::1 at 2023-06-28 06:45:46 +0900
06:45:46 web.1  |   ActiveRecord::SchemaMigration Pluck (0.5ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
06:45:46 web.1  | Processing by StaticPagesController#top as HTML
06:45:46 web.1  |   Rendering static_pages/top.html.erb
06:45:46 web.1  |   Rendered static_pages/top.html.erb (Duration: 60.1ms | Allocations: 25748)
06:45:46 web.1  | Completed 200 OK in 106ms (Views: 104.6ms | ActiveRecord: 0.0ms | Allocations: 60251)
06:45:46 web.1  |

上記ではCssSyntaxError: と出ているんですが、最初はデプロイログと同じ SassC::SyntaxError:が出ていたためscss自体を使用するのをやめて、jQueryで置き換えてみたのですがやはりTailwind cssだけ適用されず。CssSyntaxErrorと言われても効いてないのはTailwindの方なわけで……。

この時点のファイル構成.
app
    -assets
        -stylesheets
            -application.tailwind.css
            -application.css
            -bubble.css #←scssをcssに変更
            -top.css

bin/rails assets:clobber を打ったり設定や文法を見直すこと2時間。
ターミナルを見ていて、「こいつ、めっちゃコメント書いてるな…」と気付いて思い出した。

一番最初の記事にコメントアウトを消すとエラー解消したと書いてあった。

この記事ではショートハンドの間に/　/でコメント入れるのはよくないと書いてましたが、cssのクラス丸ごとコメントアウトしててもエラー出ました。コメント全部消したら適用された。
調べてみるとPostCSSでコメントアウトを利用するにはプラグインが必要らしい。

これで、app/assets/config/manifest.jsの読み込みを消してもapplication.tailwind.css経由で読み込んでくれます

app/assets/config/manifest.js
//= link_tree ../images
//= link_tree ../builds

（ただし、application.tailwind.cssを読みk無為の<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>は必要です。）

また、一応herokuの再デプロイも成功しました。scss消しちゃったので、そっちのせいかもしれませんが。

エラー解決に必死で記録取るの忘れていたため、曖昧な部分もあります。間違いやご指摘ありましたらぜひコメントください。🙏

24
18
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
Sign upLogin
24
18