【Tailwind CSS #3】4つのインストール方法の紹介。オススメはPostCSSのプラグインとして使う方法。

[@eeeg]

うわーすげーなーめっちゃ管理ツールとかあるんだね

[@non5butz]

分かりやすかったー！

[@点数が足りない]

> tailwindcss@1.0.0 build > postcss-cli styles.css -o dist.css 'postcss-cli' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 手順は同じなのですがrun buildでこれが出てきます

[@mk-rf9mf]

素晴らしい講座をありがとうございます。TailwindCSSとは少し関係ないかもですが、CSSのlinterでStylelintがあると思いますが、しまぶーさんは使われてますか？また、別のCSS linterを使ってらっしゃれば教えて頂きたいです！

[@shimabu_it]

生のCSSを書くことがほぼ無いのでそもそもLinterを使っていないです！ ちなみにTailwind CSSはESLintのプラグインとして管理しています。 github.com/francoismassart/eslint-plugin-tailwindcss

[@mk-rf9mf]

@@shimabu_it ご回答ありがとうございます！なるほど、TailwindもESLintで管理されてるんですね！とても参考になります！🙇‍♂️

[@canonaria]

しまぶー先生の動画でいつも勉強させて頂いております。 今回の動画で先生と一緒に操作をして、ターミナルの使用、npmを使ったtailwindcssのインストールを初めてやってみた初心者です。 最終的に動画内で行った操作は全て出来たのですが、一つ疑問が残っております。 今後新規でサイトを作成する際には毎回ターミナルでルートディレクトリを作成し、セットアップを行い、node_moduleの中にhtmlファイルを作成していくのでしょうか？

[@dd-he6lv]

素晴らしい動画ありがとうございます。 いつも動画を見て参考にさせて頂いています。 質門なのですが、 Tailwindを同じようにインストールしていたのですが、ビルドコマンドを入力したときに警告がでてきてしまいました。 その結果、ビルドが途中で止まってしまい300行あたりでdist.cssのファイルが終了しています。 この問題を解決するために、更新や再度Tailwindのインストールからやり直してみたのですが、どうしも正常に処理ができません。 アドバイスを頂けると嬉しいです。。。 以下、実行結果 npm run build > tailwindcss@1.0.0 build > postcss styles.css -o　dist.css [deprecation] Running tailwindcss without -i, please provide an input file. warn - The `purge`/`content` options have changed in Tailwind CSS v3.0. warn - Update your configuration file to eliminate this warning. Done in 136ms.

[@tomo22296]

tailwind.config.jsのcontentにソースパスを指定すれば解決しますよ(^^) 提示されてるエラー文にも出てますが、v3.0から書き方変わったみたいです！

[@圭二山本]

見ながらやっていますが、なかなか上手く出来ずにいます。 dist.CSSまでは大丈夫です。しかし、反映されていません。 パソコンは、Windows8ですが、上手くいく方法をアドバイスお願いします。

[@エンジニアライフ]

いつも動画ありがとうございます。 動画ではビルド後の出力ファイルは18000レコードありましたが、自分の場合は500レコードほどしかありませんでした。また、CSSに適用してもうまくいきませんでした。 以下にwarning内容を記載させていただきます。このCSSに反映されない理由などわかりましたら、ご教授お願いいたします。 warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.

[@エンジニアライフ]

サイドやり直してみたものの以下のワーニングにハマってしまいます。 warn - The `content` option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles.

[@神谷一刻堂]

@@エンジニアライフ まだ見てるか知りませんが、tailwind CSSのバージョンが3に上がって記述方法が若干変わったからっぽいすね。 以下のようにcontentにindex.htmlを指定してあげれば動きますよ。 module.exports = { content: ["./index.html"], theme: { extend: {}, }, plugins: [], };

[@手裏剣サッシー]

Tailwindがいつもタイランドに空目する

[@shimabu_it]

笑っちゃいましたw たしかに🤣

[@トムちゃん-r5g]

npm run buildするとき Input Error: You must pass a valid list of files to parseがでてどうしてもうまくいきません 一応やり方は完全に揃えています npx tailwindcss -i style.css -o dist.css で一応できましたが問題あったりしますかね？ 追記 npx tailwindcss -o style.cssでstyle.cssにtailwindのcssが記述されたものができるみたいですね

[@shimabu_it]

パスが間違ってるとのことなので、まずはパスを確認してみてください〜！ 例えば style「s」.css とかではないでしょうか！👀

[@トムちゃん-r5g]

@@shimabu_it ありがとうございます。 style.cssで作ってたのでパス揃えたらできました

[@shimabu_it]

@@トムちゃん-r5g ですです！基本はエラー文です！「You must pass a valid list of files」の部分ですね👍👍

[@とも-i6h1i]

71KBのcssファイルがそんなにパフォーマンスが悪いのかが疑問。 使わないものが書いてあるという意味では無駄だけど、そんなに体感できるほどパフォーマンスが悪くなろうのだろうか。

[@gindaka-xbox-ch]

人間が見たらコンマ秒くらいの体感かもしれませんが、更新するたびに何万行の中から数行だけ探しに行くブラウザからしたらかなりパフォーマンス悪いですよ。