Tailwind CSS

（個人で活動している者の感想・雑記です）

• 流行りという Tailwind CSS を使ってみた
  • Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
• とても便利だと思ったが、「基本的には HTML にはスタイルを指示する内容を書くべきではない」という観点からの抵抗感がぬぐえない
  • なぜ Tailwindcssなのか？ CSSのパラダイムを振り返ってみた - Qiita
  • TailwindCSSって何？なんで流行ってるの？｜F Lab｜Fixel株式会社
• Sass を使う前は、<div class="mb30"> みたいな記述をしていたこともあったが、レスポンシブで破綻したりなどやはり良い印象がない

デメリットに感じた部分

• HTML ソースを見ても何のセクション・要素なのか判別しにくい
• （特に指定するスタイルが多いと）どのスタイルが当たっているか把握しにくい
• Sass + Emmet で書く方が早い
• @apply 使うなら、Sass の @extend で定義しておけばよい
• @apply などの at-rules が VS Code でエラーになる
  • レファレンスには下記のように、便利に使える公式プラグインを導入することでこの問題も解決できると書かれているが、エラーになる
  • PostCSS language support なる拡張機能をさらに追加してみたもののエラーで読み込みされない

Tailwind CSS uses a lot of custom CSS at-rules like @tailwind, @apply, and @screen, and in many editors this can trigger warnings or errors where these rules aren’t recognized.

The solution to this is almost always to install a plugin for your editor/IDE for PostCSS language support instead of regular CSS.

If you’re using VS Code, our official Tailwind CSS IntelliSense plugin includes a dedicated Tailwind CSS language mode that has support for all of the custom at-rules and functions Tailwind uses.

Editor Setup - Tailwind CSS

結論

BEM の方が自分には合っている。