Skip to content

Commit 9279df8

Browse files
nado1001nado1001
committed
docs: update README.md
1 parent 0a3e7f0 commit 9279df8

File tree

1 file changed

+22
-19
lines changed

1 file changed

+22
-19
lines changed

‎README.md‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
[![Release](https://badgen.net/github/release/nado1001/sd-tailwindcss-transformer)](https://badgen.net/github/release/nado1001/sd-tailwindcss-transformer)
44
[![Test](https://github.com/nado1001/sd-tailwindcss-transformer/actions/workflows/test.yml/badge.svg)](https://github.com/nado1001/sd-tailwindcss-transformer/actions/workflows/test.yml)
5-
[![Release](https://img.shields.io/npm/dt/sd-tailwindcss-transformer.svg?logo=npm)](https://www.npmjs.com/package/sd-tailwindcss-transformer)
5+
[![Release](https://img.shields.io/npm/dt/sd-tailwindcss-transformer.svg?logo=npm)](https://www.npmjs.com/package/sd-tailwindcss-transformer)
66

77
[![Style Dictionary to Tailwind CSS](https://github.com/nado1001/sd-tailwindcss-transformer/blob/main/images/style-dictionary-tailwindcss.png)](https://www.npmjs.com/package/sd-tailwindcss-transformer)
88

@@ -21,7 +21,7 @@ $ yarn add sd-tailwindcss-transformer
2121
### Creating configuration file
2222

2323
Generate `tailwind.config.js` by setting type to `all`.
24-
See [Creating each theme file](https://github.com/nado1001/sd-tailwindcss-transformer#creating-each-theme-file) if you wish to customize the configuration file with [plugin functions](https://tailwindcss.com/docs/plugins), etc.
24+
See [Creating each theme file](https://github.com/nado1001/sd-tailwindcss-transformer#creating-each-theme-file) if you wish to customize the configuration file with [plugin functions](https://tailwindcss.com/docs/plugins), etc.
2525

2626
```js
2727
const StyleDictionaryModule = require('style-dictionary')
@@ -65,7 +65,7 @@ module.exports = {
6565
### Creating each [theme](https://tailwindcss.com/docs/configuration#theme) file
6666

6767
Create an object for each theme, assuming that various customizations will be made in the configuration file.
68-
Import and use the created files in `tailwind.config.js`.
68+
Import and use the created files in `tailwind.config.js`.
6969

7070
```js
7171
const StyleDictionaryModule = require('style-dictionary')
@@ -105,16 +105,17 @@ module.exports = {
105105
```
106106

107107
### Using CSS custom variables
108+
108109
CSS custom variables can be used by setting isVariables to `true`.
109-
In this case, a CSS file must also be generated.
110+
In this case, a CSS file must also be generated.
110111

111112
```js
112113
const StyleDictionaryModule = require('style-dictionary')
113114
const { makeSdTailwindConfig } = require('sd-tailwindcss-transformer')
114115

115116
const sdConfig = makeSdTailwindConfig({
116117
type: 'all',
117-
isVariables: true,
118+
isVariables: true
118119
})
119120

120121
sdConfig.platforms['css'] = {
@@ -134,6 +135,7 @@ sdConfig.platforms['css'] = {
134135
const StyleDictionary = StyleDictionaryModule.extend(sdConfig)
135136
StyleDictionary.buildAllPlatforms()
136137
```
138+
137139
Output:
138140

139141
```css
@@ -146,11 +148,10 @@ Output:
146148
:root {
147149
--font-size-medium: 1rem;
148150
--font-size-small: 0.75rem;
149-
--colors-base-red: #FF0000;
151+
--colors-base-red: #ff0000;
150152
--colors-base-gray: #111111;
151-
...
153+
...;
152154
}
153-
154155
```
155156

156157
```js
@@ -182,19 +183,21 @@ module.exports = {
182183
Please see [Example](https://github.com/nado1001/sd-tailwindcss-transformer/tree/main/example) for details.
183184

184185
### Options
186+
185187
Optional except for `type`.
186188

187-
| Attribute | Description | Type |
188-
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
189-
| type | Set the name of each theme (colors, fontSize, etc.) for `'all'` or tailwind. | `'all'` or string |
190-
| formatType | Set the format of the Tailwind CSS configuration file. <br>Default value: `js` | `'js'` `'cjs'` |
191-
| isVariables | Set when using CSS custom variables. <br>Default value: `false` | boolean |
192-
| source | [`source`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: ` ['tokens/**/*.json']` | Array of strings |
193-
| transforms | [`platform.transforms`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: `['attribute/cti','name/cti/kebab']` | Array of strings |
194-
| buildPath | [`platform.buildPath`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: `'build/web/'` | string |
195-
| tailwind.content | [Content](https://tailwindcss.com/docs/content-configuration) attribute of Tailwind CSS. Set if necessary when 'all' is set in type. <br>Default value: `['./src/**/*.{ts,tsx}']` | Array of strings |
196-
| tailwind.darkMode | [Dark Mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) attribute of Tailwind CSS. Set if necessary when 'all' is set in type. <br>Default value: `'class'` | `'media'` `'class'` |
197-
| tailwind.plugin | Tailwind CSS [official plugins](https://tailwindcss.com/docs/plugins#official-plugins). Set if necessary when 'all' is set in type. | Array of `'typography'` `'forms'` `'aspect-ratio'` `'line-clamp'` `'container-queries'` |
189+
| Attribute | Description | Type |
190+
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
191+
| type | Set the name of each theme (colors, fontSize, etc.) for `'all'` or tailwind. | `'all'` or string |
192+
| formatType | Set the format of the Tailwind CSS configuration file. <br>Default value: `js` | `'js'` `'cjs'` |
193+
| isVariables | Set when using CSS custom variables. <br>Default value: `false` | boolean |
194+
| source | [`source`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: ` ['tokens/**/*.json']` | Array of strings |
195+
| transforms | [`platform.transforms`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: `['attribute/cti','name/cti/kebab']` | Array of strings |
196+
| buildPath | [`platform.buildPath`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: `'build/web/'` | string |
197+
| prefix | [`platform.prefix`](https://github.com/amzn/style-dictionary/blob/main/types/Platform.d.ts#L21) attribute of style-dictionary.<br>Valid when using css variables (isVariables: true) | string |
198+
| tailwind.content | [Content](https://tailwindcss.com/docs/content-configuration) attribute of Tailwind CSS. Set if necessary when 'all' is set in type. <br>Default value: `['./src/**/*.{ts,tsx}']` | Array of strings |
199+
| tailwind.darkMode | [Dark Mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) attribute of Tailwind CSS. Set if necessary when 'all' is set in type. <br>Default value: `'class'` | `'media'` `'class'` |
200+
| tailwind.plugin | Tailwind CSS [official plugins](https://tailwindcss.com/docs/plugins#official-plugins). Set if necessary when 'all' is set in type. | Array of `'typography'` `'forms'` `'aspect-ratio'` `'line-clamp'` `'container-queries'` |
198201

199202
## License
200203

0 commit comments

Comments
 (0)