Skip to content

Commit 1e8da55

Browse files
mertasanmertasan
committed
update docs
1 parent 5c49c60 commit 1e8da55

File tree

2 files changed

+50
-32
lines changed

2 files changed

+50
-32
lines changed

‎README.md

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ module.exports = {
5959
red: {
6060
50: 'var(--colors-red-50)'
6161
}
62-
}
62+
},
6363
variables: {
6464
DEFAULT: {
6565
sizes: {
@@ -365,7 +365,7 @@ module.exports = {
365365
},
366366
plugins: [
367367
require('@mertasan/tailwindcss-variables')({
368-
variablePrefix: '--admin'
368+
variablePrefix: 'admin'
369369
})
370370
]
371371
}
@@ -438,14 +438,15 @@ Variable keys can only include designated characters. Other characters will be a
438438

439439
Rule:
440440
````jsregexp
441-
/[^a-z0-9\-]+/gi
441+
/[^a-zA-Z0-9-.]+/gi
442442
````
443443

444-
| Before | After |
445-
|-------------- |-------- |
446-
| hello[$&+,:;=?@#'<>.-^*()%!]world | hello-world |
447-
| hello__world | hello-world |
448-
| css_variables_for-tailwindcss | css-variables-for-tailwindcss |
444+
| Before | After |
445+
|--------------------------------------|-----------------------------------|
446+
| hello[$&+,:;=?@#'<>-^*()%!]WORLD | hello-WORLD |
447+
| hello__world | hello-world |
448+
| css_variables_for-tailwindcss | css-variables-for-tailwindcss |
449+
| foo-bar-1.0 | foo-bar-1\\.0 |
449450

450451
Here's an example:
451452
```javascript
@@ -456,14 +457,20 @@ module.exports = {
456457
variables: {
457458
DEFAULT: {
458459
colors: {
459-
'hello[$&+,:;=?@#|\'<>.-^*()%!]world': '100%',
460+
'hello[$&+,:;=?@#|\'<>-^*()%!]WORLD': '100%',
460461
underscore_to_dash: '100%',
461462
'underscore_to_dash-with-dash': '100%',
462463
auto_dash: '100%',
463464
},
465+
sizes: {
466+
1.5: '1rem',
467+
xl: {
468+
'3.0': '2rem',
469+
},
470+
},
464471
},
465472
'[type=\'button\']': {
466-
'hello[$&+,:;=?@#|\'<>.-^*()%!]world': '100%',
473+
'hello[$&+,:;=?@#|\'<>-^*()%!]WORLD': '100%',
467474
underscore_to_dash: '100%',
468475
'underscore_to_dash-with-dash': '100%',
469476
auto_dash: '100%',
@@ -483,14 +490,16 @@ module.exports = {
483490

484491
```css
485492
:root {
486-
--colors-hello-world: 100%;
493+
--colors-hello-WORLD: 100%;
487494
--colors-underscore-to-dash: 100%;
488495
--colors-underscore-to-dash-with-dash: 100%;
489-
--colors-auto-dash: 100%
496+
--colors-auto-dash: 100%;
497+
--sizes-1\.5: 1rem;
498+
--sizes-xl-3\.0: 2rem
490499
}
491500

492501
[type='button'] {
493-
--hello-world: 100%;
502+
--hello-WORLD: 100%;
494503
--underscore-to-dash: 100%;
495504
--underscore-to-dash-with-dash: 100%;
496505
--auto-dash: 100%;
@@ -906,7 +915,7 @@ const plugin = require('tailwindcss/plugin')
906915
const variablesApi = require('@mertasan/tailwindcss-variables/api')
907916

908917
let variableOptions = {
909-
variablePrefix: '--myplugin'
918+
variablePrefix: 'myplugin'
910919
}
911920

912921
const pluginVariables = {
@@ -968,7 +977,7 @@ const plugin = require('tailwindcss/plugin')
968977
const variablesApi = require('@mertasan/tailwindcss-variables/api')
969978

970979
let variableOptions = {
971-
variablePrefix: '--myplugin'
980+
variablePrefix: 'myplugin'
972981
}
973982

974983
const pluginVariables = {
@@ -1115,7 +1124,7 @@ module.exports = plugin.withOptions(
11151124
return function ({addComponents, theme, config}) {
11161125

11171126
let variableOptions = {
1118-
variablePrefix: theme('myPlugin.prefix', '--forms')
1127+
variablePrefix: theme('myPlugin.prefix', 'forms')
11191128
};
11201129

11211130
addComponents(variablesApi.variables(_.merge(pluginThemes(theme).themes, {DEFAULT: theme('myPlugin.options', {})}), variableOptions))

‎README.tr.md

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ module.exports = {
6060
red: {
6161
50: 'var(--colors-red-50)'
6262
}
63-
}
63+
},
6464
variables: {
6565
DEFAULT: {
6666
sizes: {
@@ -366,7 +366,7 @@ module.exports = {
366366
},
367367
plugins: [
368368
require('@mertasan/tailwindcss-variables')({
369-
variablePrefix: '--admin'
369+
variablePrefix: 'admin'
370370
})
371371
]
372372
}
@@ -439,14 +439,15 @@ Objelerde alt tire (_) kullanımı mümkün olduğundan, alt tireler de orta çi
439439

440440
Rule:
441441
````jsregexp
442-
/[^a-z0-9\-]+/gi
442+
/[^a-zA-Z0-9-.]+/gi
443443
````
444444

445-
| öncesi | sonrası |
446-
|-------------- |-------- |
447-
| hello[$&+,:;=?@#'<>.-^*()%!]world | hello-world |
448-
| hello__world | hello-world |
449-
| css_variables_for-tailwindcss | css-variables-for-tailwindcss |
445+
| öncesi | sonrası |
446+
|--------------------------------------|-----------------------------------|
447+
| hello[$&+,:;=?@#'<>-^*()%!]WORLD | hello-WORLD |
448+
| hello__world | hello-world |
449+
| css_variables_for-tailwindcss | css-variables-for-tailwindcss |
450+
| foo-bar-1.0 | foo-bar-1\\.0 |
450451

451452
İşte bir örnek:
452453

@@ -458,14 +459,20 @@ module.exports = {
458459
variables: {
459460
DEFAULT: {
460461
colors: {
461-
'hello[$&+,:;=?@#|\'<>.-^*()%!]world': '100%',
462+
'hello[$&+,:;=?@#|\'<>-^*()%!]WORLD': '100%',
462463
underscore_to_dash: '100%',
463464
'underscore_to_dash-with-dash': '100%',
464465
auto_dash: '100%',
465466
},
467+
sizes: {
468+
1.5: '1rem',
469+
xl: {
470+
'3.0': '2rem',
471+
},
472+
},
466473
},
467474
'[type=\'button\']': {
468-
'hello[$&+,:;=?@#|\'<>.-^*()%!]world': '100%',
475+
'hello[$&+,:;=?@#|\'<>-^*()%!]WORLD': '100%',
469476
underscore_to_dash: '100%',
470477
'underscore_to_dash-with-dash': '100%',
471478
auto_dash: '100%',
@@ -485,14 +492,16 @@ module.exports = {
485492

486493
```css
487494
:root {
488-
--colors-hello-world: 100%;
495+
--colors-hello-WORLD: 100%;
489496
--colors-underscore-to-dash: 100%;
490497
--colors-underscore-to-dash-with-dash: 100%;
491-
--colors-auto-dash: 100%
498+
--colors-auto-dash: 100%;
499+
--sizes-1\.5: 1rem;
500+
--sizes-xl-3\.0: 2rem
492501
}
493502

494503
[type='button'] {
495-
--hello-world: 100%;
504+
--hello-WORLD: 100%;
496505
--underscore-to-dash: 100%;
497506
--underscore-to-dash-with-dash: 100%;
498507
--auto-dash: 100%;
@@ -908,7 +917,7 @@ const plugin = require('tailwindcss/plugin')
908917
const variablesApi = require('@mertasan/tailwindcss-variables/api')
909918

910919
let variableOptions = {
911-
variablePrefix: '--myplugin'
920+
variablePrefix: 'myplugin'
912921
}
913922

914923
const pluginVariables = {
@@ -970,7 +979,7 @@ const plugin = require('tailwindcss/plugin')
970979
const variablesApi = require('@mertasan/tailwindcss-variables/api')
971980

972981
let variableOptions = {
973-
variablePrefix: '--myplugin'
982+
variablePrefix: 'myplugin'
974983
}
975984

976985
const pluginVariables = {
@@ -1123,7 +1132,7 @@ module.exports = plugin.withOptions(
11231132
return function ({addComponents, theme, config}) {
11241133

11251134
let variableOptions = {
1126-
variablePrefix: theme('myPlugin.prefix', '--forms')
1135+
variablePrefix: theme('myPlugin.prefix', 'forms')
11271136
};
11281137

11291138
addComponents(variablesApi.variables(_.merge(pluginThemes(theme).themes, {DEFAULT: theme('myPlugin.options', {})}), variableOptions))

0 commit comments

Comments
 (0)