You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+24-25Lines changed: 24 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,40 +6,39 @@
6
6
7
7
# Tailwindcss CSS Variables
8
8
9
-
This plugin allows you to configure CSS variables for tailwindcss by enabling the `tailwind.config.js` file.
9
+
This plugin allows you to configure CSS variables in the `tailwind.config.js`
10
10
11
11
12
-
How it works is similar to the tailwindcss' default configirations. It is also possible to define a different variable group for Dark Mode and to integrate it with your packages through plugin API.
12
+
Similar to the tailwindcss configurations you are used to. It is also possible to define a different variable group for Dark Mode and to integrate it with your packages through plugin API.
13
13
14
14
15
-
## Highlighted Features
15
+
## Highlights
16
16
17
-
- Variables are as easy as defining tailwindcss' colors...
17
+
- Variables are as easy as defining tailwindcss colors...
18
18
- You can designate the variables to `:root` or custom CSS selectors.
19
19
- Variables can be formed through using nested object notation.
20
20
- Different variables can be composed for the Dark Mode.
21
21
- Dark Mode variables are set automatically through the `class` or `media` modes on your configuration.
22
-
- If `darkMode` settings are set as `class`, custom selectors can be defined.
23
-
- Enables you to configure themes when you are creating your own plugin through Plugin API.
24
-
- Prefix can be defined for variables. (Benefits the Plugin API)
25
-
- Variables can be used for the configuration file or .css like style files.
22
+
- If `darkMode` config are set as `class`, custom dark selector can be defined.
23
+
- It allows you to add custom themes while creating your own plugin via the plugin API.
24
+
- Prefix can be defined for variables. (It is useful when using the plugin API)
26
25
- You can configure your own needs such as multi-themes without needing an additional plugin!
27
26
28
27
29
28
## Documentation
30
29
31
-
| Language | Documentation Link|
30
+
| Language | Documentation link|
32
31
| --- | --- |
33
-
| English |[**Documentation**](./README.md)|
34
-
| Turkish |Dokümantasyon|
32
+
| English | Documentation |
33
+
| Turkish |[**Dökümantasyon**](./README.tr.md)|
35
34
36
35
## Installation
37
36
38
37
```cli
39
38
npm install -D @mertasan/tailwindcss-variables
40
39
```
41
40
42
-
## Easy Accessibility
41
+
## Usage
43
42
44
43
```javascript
45
44
// tailwind.config.js
@@ -169,7 +168,7 @@ module.exports = {
169
168
170
169
#### with the `darkToRoot` and `darkSelector` configurations
171
170
172
-
If the `darkMode:`configuration is set as `'class'` in your tailwindcss configuration, you can change and customize the `darkToRoot` and `darkSelector` settings.
171
+
If the `darkMode`configuration is set as `'class'` in your tailwindcss configuration, you can change and customize the `darkToRoot` and `darkSelector` settings.
173
172
174
173
175
174
| Option | Type | Default | Description |
@@ -326,7 +325,7 @@ module.exports = {
326
325
}
327
326
```
328
327
329
-
## Using Prefixes
328
+
## Prefix
330
329
331
330
```javascript
332
331
// tailwind.config.js
@@ -376,7 +375,7 @@ module.exports = {
376
375
}
377
376
```
378
377
379
-
## Nested Object Notation
378
+
## Nested object notation
380
379
381
380
```javascript
382
381
// tailwind.config.js
@@ -418,7 +417,7 @@ module.exports = {
418
417
```
419
418
420
419
421
-
## Rules for Naming Keys
420
+
## Rules for keys of variables
422
421
423
422
Variable keys can only include designated characters. Other characters will be automatically removed. Because using underscores (_) on objects is allowed, underscores will be transformed into middle dashes (-).
424
423
@@ -547,9 +546,9 @@ module.exports = {
547
546
}
548
547
```
549
548
550
-
### API Component Helper
549
+
### API component helper
551
550
552
-
You can also use tailwindcss-variables plugin API to save your components.
551
+
You can also use tailwindcss-variables plugin API to register your components.
553
552
554
553
```javascript
555
554
// tailwind.config.js
@@ -637,11 +636,11 @@ module.exports = {
637
636
}
638
637
```
639
638
640
-
## Detailed Authentic Usage Example
639
+
## Detailed example of the API
641
640
642
641
**What are the advantages?**
643
642
644
-
Imagine you are creating a form builder (PHP) package for Laravel. In this case, I am sure there will be a lot of styles to customize. Nonetheless, one of the most necessary things is the colors! You'll develop the components with the colors you pick out. Of course these colors can be customized with the `vendor:publish` command but you can make it simpler for everyone. Users can customize the colors for their own likings and if they wish they can also configure your extension for the dark mode as well. This way, users don't have to alter the `.css` or `.blade.php` files for some small and simple customizations. Thus, they can use your extension with up to date templates and can adapt to future version updates. If you have read this statement, it means that now you know why this plugin came about. :)
643
+
Imagine you are creating a form builder (PHP) package for Laravel. In this case, I am sure there will be a lot of styles to customize. Nonetheless, one of the most necessary things is the colors! You'll develop the components with the colors you pick out. Of course these colors can be customized with the `vendor:publish` command but you can make it simpler for everyone. Users can customize the colors for their own likings and if they wish they can also configure your plugin for the dark mode as well. This way, users don't have to alter the `.css` or `.blade.php` files for some small and simple customizations. Thus, they can use your extension with up to date templates and can adapt to future version updates. If you have read this statement, it means that now you know why this plugin came about. :)
645
644
646
645
647
646
@@ -761,11 +760,11 @@ module.exports = {
761
760
}
762
761
```
763
762
764
-
With a setup just like on this example, it won't be necessary to publish extra .css flies for your plugin styles and also, it won't be necessary for the users to sort out your style files to compile your packages.
763
+
Based on these examples, it won't be necessary to publish extra .css flies for your plugin styles and also, it won't be necessary for the users to sort out your style files to compile your packages.
765
764
766
765
767
766
768
-
## Examples and Tests
767
+
## Examples and tests
769
768
770
769
I have prepared examples on both helping with the usage and for testing all of the features that's being offered to make sure it works just fine.
771
770
@@ -777,12 +776,12 @@ I have prepared examples on both helping with the usage and for testing all of t
> Documents on examples and tests are re-organized on pull-request, push, release and etc. activities.
781
-
> For this reason, file paths like `require(../index)` have been used on the example files. If you were to use the examples, you need to change the relevant interiors as `require('@mertasan/tailwindcss-variables')`.
779
+
> Documents on examples and tests are re-organized on pull-request, push, release and etc. events.
780
+
> For this reason, file paths like `require(../index)` have been used on the example files. If you were to use the examples, you need to change the relevant lines as `require('@mertasan/tailwindcss-variables')`.
782
781
>
783
782
784
783
785
-
## Help
784
+
## If You Need Help
786
785
787
786
Please send any questions and issues through GitHub issues. I will try my best to help you.
0 commit comments