Tailwindcss2.1でjitを設定する

2021-04-06

概要

本日Tailwindcssのブログでv2.1のリリース報告がありました。
https://blog.tailwindcss.com/tailwindcss-2-1

以前のバージョンであるv2.0.4とどう違うのか、簡単にまとめてみます。

jitの指定方法

以前では、@tailwindcss / jitをpostcss.config.jsに記述する必要がありました。

postcss.config.js
module.exports = {
    plugins: {
      '@tailwindcss/jit': {},
      autoprefixer: {},
    }
}

ですが、v2.1からはその必要はなく、tailwindcss本体にコアが移動しました。

postcss.config.js
module.exports = {
    plugins: {
      'tailwindcss': {},
      autoprefixer: {},
    }
}

そして、tailwind.config.jsには以下のようにmodeを追加します。

tailwind.config.js
module.exports = {
  mode: 'jit',
  ...
}

これで、導入は終わりです。簡単ですね。

tailwindcssがインストールされているとき

npm install tailwind@latest

これで、最新バージョンのtailwindcssをインストールできます。

mix-blend-modeが追加

mix-blend-modeが追加されました。以下のドキュメントを参考にしてください。
https://tailwindcss.com/docs/mix-blend-mode

IEはもちろん非対応。

isolationの追加

普段あまりお目にかからないプロパティですが、これもいざというときに便利なものです。
https://tailwindcss.com/docs/isolation

filterの追加

個人的に一番喜びました。
https://tailwindcss.com/docs/filter

backdrop-filterも追加されています。
https://tailwindcss.com/docs/backdrop-filter

結論

ここ最近のTailwindcssの進化が目覚ましいです。
恩恵を受けながら、快適なコーディングライフが送れそうです。

IE?知らんな。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店