Skip to content

Latest commit

 

History

History
66 lines (48 loc) · 2 KB

README.md

File metadata and controls

66 lines (48 loc) · 2 KB

Tailwind Theme Plugin

@digital-go-jp/design-tokens をベースにした Tailwind CSS のテーマプラグイン。

npm version

インストール

npm install @digital-go-jp/tailwind-theme-plugin

プラグイン設定方法

Tailwind CSS v3

tailwind.config.js の plugins 部分を以下のように設定してください。

{
  content: [...],
  theme: {
    extend: {
      ...
    },
  },
  plugins: [require('@digital-go-jp/tailwind-theme-plugin')],
}

Tailwind CSS v4

Tailwind CSS の設定をしている CSS ファイルで以下のように設定してください。

@import 'tailwindcss';
@import '@digital-go-jp/tailwind-theme-plugin/v4';

v2 への移行

v1.x からの破壊的変更と対応方法は、移行ガイドを参照してください。

v2.0.0 は @digital-go-jp/design-tokens v2.1.0 をベースにしています。Tailwind CSS の対応バージョンは v3.4.17 以降の v3 系、および v4 系です。

使用例

バージョン対応表

Figma のバージョン パッケージのバージョン
2.3.0〜2.18.2 2.0.0
2.3.0〜2.14.0 1.0.1
2.2.0 0.2.5
2.1.3 0.2.5
2.1.2 0.2.5
2.1.1 0.2.5
2.1.0 0.2.5
2.0.4 0.2.5
2.0.3 0.2.0
2.0.2 0.1.17
2.0.1 0.1.16
1.4.3 0.1.16