An open API service indexing awesome lists of open source software.

https://github.com/digital-go-jp/tailwind-theme-plugin

Tailwind CSS テーマプラグイン
https://github.com/digital-go-jp/tailwind-theme-plugin

npm tailwind-css tailwind-css-plugin

Last synced: about 1 month ago
JSON representation

Tailwind CSS テーマプラグイン

Awesome Lists containing this project

README

          

# Tailwind Theme Plugin

[@digital-go-jp/design-tokens](https://www.npmjs.com/package/@digital-go-jp/design-tokens) をベースにした Tailwind CSS のテーマプラグイン。

[![npm version](https://badge.fury.io/js/@digital-go-jp%2Ftailwind-theme-plugin.svg)](https://badge.fury.io/js/@digital-go-jp%2Ftailwind-theme-plugin)

## インストール

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

## プラグイン設定方法

### Tailwind CSS v3

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

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

### Tailwind CSS v4

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

```css

@import 'tailwindcss';

@plugin '@digital-go-jp/tailwind-theme-plugin';

@theme {
...
}
```

## 使用例

- [examples](./examples/) ディレクトリ
- [React サンプルコンポーネント集](https://github.com/digital-go-jp/design-system-example-components)

## バージョン対応表

| Figma のバージョン | パッケージのバージョン |
| ------------------ | ---------------- |
| 2.10.1 | 0.3.4 |
| 2.10.0 | 0.3.4 |
| 2.9.0 | 0.3.4 |
| 2.8.1 | 0.3.4 |
| 2.8.0 | 0.3.4 |
| 2.7.0 | 0.3.4 |
| 2.6.0 | 0.3.4 |
| 2.5.1 | 0.3.4 |
| 2.5.0 | 0.3.4 |
| 2.4.0 | 0.3.4 |
| 2.3.0 | 0.3.4 |
| 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 |