最小手数で始めるTailwind CSS - メドピア開発者ブログ

パクチーパクパク小宮山です。 掲題通りTailwind CSSの始め方を最小手数で書いていきます。余談は一切ありません。 tl;dr CSS管理は諦めてTailwind CSSを使おう。 Get Started tailwindcss.com ひたすら公式通りに進めます。例によってフロントエンドプロジェクトの環境構築はひたすら面倒なので、Tailwind CSS以外のツールチェインはなるべく使わない構成を目指します。 installします。 $ yarn init $ yarn add tailwindcss セットアップします。 $ yarn tailwindcss init こういうファイルが作られました。 tailwind.config.js module.exports = { purge: [], theme: { extend: {}, }, variants: {}, plu

[kvx]

PurgeCSSはすべてのhtml、ソースが開発環境側で管理できていればいいんだけどね〜。

[D_first]

レスポンシブデザインにしようとしてpurgecssで消えちゃう問題がどうにも解決できなくて困ってる

[wataken44]

次に自分でなんかつくるときはtailwind採用したいのでメモ

[h_taiji]

使いたい

[kxn4t]

開発環境は大丈夫だけど本番でスタイル当たらない…ってなることがあり、PurgeCSSかぁーーーー！ってなることが多々。

[knjname]

良記事 / styled-componentsとTailwind CSSの共存でtwin.macro使ってる（←聞かれてもないけど書く）

[yarumato]

“Tailwind CSSはただのCSSファイルでSize: 1.95MBもあったが最近のリリースでPurgeCSSも内包し不要なclassを全て削除可能にしてサイズ問題を解決。動的にCSSクラス文字列を生成せず完全一致な文字列としてファイル内に記述”

[murokaco]

“デフォルトでline-height: 1.5;がhtmlにあたっているので、全ての余白を自力で指定してピクセルパーフェクトを目指す場合は少し厄介です。”

[yicru]

>余談: そうはいっても万能ではなかった group-hoverでできそう https://tailwindcss.com/docs/pseudo-class-variants/#group-hover 2020/05/22

[kenzo0107]

ほんとに余談がない！w

[fukumura]

追い風を推してます。