Skip to content

Commit f714479

Browse files
nado1001nado1001
authored
Merge pull request #352 from BJJLangedijk/feat/plugins
fix: allow for plugin options to be passed
2 parents 4d91125 + f6fddf0 commit f714479

File tree

2 files changed

+17
-17
lines changed

2 files changed

+17
-17
lines changed

‎README.md‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $ yarn add sd-tailwindcss-transformer
2020

2121
### Creating configuration file
2222

23-
Generate `tailwind.config.js` by setting type to `all`.
23+
Generate `tailwind.config.js` by setting type to `all`.
2424
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
@@ -64,7 +64,7 @@ module.exports = {
6464

6565
### Creating each [theme](https://tailwindcss.com/docs/configuration#theme) file
6666

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

7070
```js
@@ -106,7 +106,7 @@ module.exports = {
106106

107107
### Using CSS custom variables
108108

109-
CSS custom variables can be used by setting isVariables to `true`.
109+
CSS custom variables can be used by setting isVariables to `true`.
110110
In this case, a CSS file must also be generated.
111111

112112
```js
@@ -186,19 +186,19 @@ Please see [Example](https://github.com/nado1001/sd-tailwindcss-transformer/tree
186186

187187
Optional except for `type`.
188188

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-
| extend | Set to add transformed styles to the `'extend'` key within the `'theme'` key or not. <br>Default value: `true` | boolean |
195-
| 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 |
196-
| 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 |
197-
| buildPath | [`platform.buildPath`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: `'build/web/'` | string |
198-
| 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 |
199-
| 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 |
200-
| 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'` |
201-
| 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+
| extend | Set to add transformed styles to the `'extend'` key within the `'theme'` key or not. <br>Default value: `true` | boolean |
195+
| 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 |
196+
| 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 |
197+
| buildPath | [`platform.buildPath`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: `'build/web/'` | string |
198+
| 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 |
199+
| 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 |
200+
| 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'` |
201+
| 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'` `['typography', options]` `'forms'` `['forms', options]` `'aspect-ratio'` `'line-clamp'` `'container-queries'` |
202202

203203
## License
204204

‎src/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export type SdObjType<T extends Record<string, any>> = {
99

1010
export type TailwindOptions = Pick<TailwindConfig, 'content' | 'darkMode'> & {
1111
plugins: Array<
12-
'typography' | 'forms' | 'aspect-ratio' | 'line-clamp' | 'container-queries'
12+
'typography' | ['typography', { className?: string, target?: 'modern' | 'legacy' }] | 'forms' | ['forms', { strategy?: 'base' | 'class' }] | 'aspect-ratio' | 'line-clamp' | 'container-queries'
1313
>
1414
}
1515
export type TailwindFormatType = 'js' | 'cjs'

0 commit comments

Comments
 (0)