Skip to content

Commit 403645d

Browse files
mertasanmertasan
committed
update docs
1 parent 30b3c3d commit 403645d

File tree

2 files changed

+175
-17
lines changed

2 files changed

+175
-17
lines changed

‎README.md

Lines changed: 90 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -501,19 +501,38 @@ const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')
501501

502502
module.exports = {
503503
theme: {
504+
screens: false,
504505
colors: {
505-
primary: colorVariable('--colors-primary'),
506-
secondary: colorVariable('var(--colors-secondary)'), // or
507-
gray: 'var(--colors-gray)', // or default usage
506+
primary: colorVariable('--colors-primary'), // HEX (3 digits)
507+
secondary: colorVariable('var(--colors-secondary)'), // HEX (6 digits)
508+
white: '#ffffff', // no variable
509+
blue: colorVariable('var(--colors-blue)'), // RGB
510+
red: {
511+
400: colorVariable('var(--colors-red-400)'), // RGBA
512+
500: colorVariable('var(--colors-red-500)'), // RGBA
513+
600: 'var(--colors-red-500)', // RGBA (without using colorVariable() helper)
514+
},
515+
gray: 'var(--colors-gray)', // HEX (6 digits) (without using colorVariable() helper)
516+
green: 'var(--colors-green)', // RGB (without using colorVariable() helper)
508517
},
509518
variables: {
510519
DEFAULT: {
511520
colors: {
512521
primary: '#ff0',
513522
secondary: '#000000',
514-
gray: '#6B7280'
523+
gray: '#6B7280',
524+
blue: 'rgb(0,0,254)',
525+
red: {
526+
400: 'rgba(254,0,0,0.5)',
527+
500: 'rgba(254,0,0,1)',
528+
},
529+
green: 'rgb(0,255,0)',
530+
},
531+
sizes: {
532+
small: '10px',
533+
medium: '2rem',
534+
large: '100%',
515535
},
516-
},
517536
},
518537
},
519538
},
@@ -525,30 +544,90 @@ module.exports = {
525544
}
526545
```
527546

547+
**Purge:**
548+
549+
```html
550+
<div class="text-primary text-opacity-50"></div>
551+
<div class="bg-secondary bg-opacity-50"></div>
552+
<div class="bg-gray bg-opacity-50"></div>
553+
<div class="text-blue text-opacity-50"></div>
554+
<div class="bg-red-400"></div>
555+
<div class="bg-red-500"></div>
556+
<div class="bg-red-600"></div>
557+
<div class="bg-green bg-opacity-50"></div>
558+
<div class="bg-white bg-opacity-50"></div>
559+
```
528560
**Output:**
529561

530562
```css
531563
:root {
532564
--colors-primary: #ff0;
533565
--colors-secondary: #000000;
534566
--colors-gray: #6B7280;
567+
--colors-blue: rgb(0,0,254);
568+
--colors-red-400: rgba(254,0,0,0.5);
569+
--colors-red-500: rgba(254,0,0,1);
570+
--colors-red-400-rgb: 254,0,0;
571+
--colors-red-500-rgb: 254,0,0;
572+
--colors-green: rgb(0,255,0);
535573
--colors-primary-rgb: 255,255,0;
536574
--colors-secondary-rgb: 0,0,0;
537-
--colors-gray-rgb: 107,114,128
575+
--colors-gray-rgb: 107,114,128;
576+
--colors-blue-rgb: 0,0,254;
577+
--colors-green-rgb: 0,255,0;
578+
--sizes-small: 10px;
579+
--sizes-medium: 2rem;
580+
--sizes-large: 100%
538581
}
539582

540583
.text-primary {
541-
--tw-text-opacity: 1;
542-
color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
584+
--tw-text-opacity: 1;
585+
color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
586+
}
587+
588+
.text-blue {
589+
--tw-text-opacity: 1;
590+
color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
591+
}
592+
593+
.text-opacity-50 {
594+
--tw-text-opacity: 0.5
543595
}
544596

545597
.bg-secondary {
546-
--tw-bg-opacity: 1;
547-
background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
598+
--tw-bg-opacity: 1;
599+
background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
600+
}
601+
602+
.bg-white {
603+
--tw-bg-opacity: 1;
604+
background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
605+
}
606+
607+
.bg-red-400 {
608+
--tw-bg-opacity: 1;
609+
background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
610+
}
611+
612+
.bg-red-500 {
613+
--tw-bg-opacity: 1;
614+
background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
615+
}
616+
617+
.bg-red-600 {
618+
background-color: var(--colors-red-500)
548619
}
549620

550621
.bg-gray {
551-
background-color: var(--colors-gray)
622+
background-color: var(--colors-gray)
623+
}
624+
625+
.bg-green {
626+
background-color: var(--colors-green)
627+
}
628+
629+
.bg-opacity-50 {
630+
--tw-bg-opacity: 0.5
552631
}
553632
```
554633

‎README.tr.md

Lines changed: 85 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -502,19 +502,38 @@ const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')
502502

503503
module.exports = {
504504
theme: {
505+
screens: false,
505506
colors: {
506-
primary: colorVariable('--colors-primary'),
507-
secondary: colorVariable('var(--colors-secondary)'), // veya
508-
gray: 'var(--colors-gray)', // varsayılan kullanım şekli
507+
primary: colorVariable('--colors-primary'), // HEX (3 haneli)
508+
secondary: colorVariable('var(--colors-secondary)'), // HEX (6 haneli)
509+
white: '#ffffff', // standart kullanım (output incelemesi için)
510+
blue: colorVariable('var(--colors-blue)'), // RGB
511+
red: {
512+
400: colorVariable('var(--colors-red-400)'), // RGBA
513+
500: colorVariable('var(--colors-red-500)'), // RGBA
514+
600: 'var(--colors-red-500)', // RGBA (colorVariable() yardımcısı kullanmadan)
515+
},
516+
gray: 'var(--colors-gray)', // HEX (6 haneli) (colorVariable() yardımcısı kullanmadan)
517+
green: 'var(--colors-green)', // RGB (colorVariable() yardımcısı kullanmadan)
509518
},
510519
variables: {
511520
DEFAULT: {
512521
colors: {
513522
primary: '#ff0',
514523
secondary: '#000000',
515-
gray: '#6B7280'
524+
gray: '#6B7280',
525+
blue: 'rgb(0,0,254)',
526+
red: {
527+
400: 'rgba(254,0,0,0.5)',
528+
500: 'rgba(254,0,0,1)',
529+
},
530+
green: 'rgb(0,255,0)',
531+
},
532+
sizes: {
533+
small: '10px',
534+
medium: '2rem',
535+
large: '100%',
516536
},
517-
},
518537
},
519538
},
520539
},
@@ -526,31 +545,91 @@ module.exports = {
526545
}
527546
```
528547

548+
**Purge:**
549+
550+
```html
551+
<div class="text-primary text-opacity-50"></div>
552+
<div class="bg-secondary bg-opacity-50"></div>
553+
<div class="bg-gray bg-opacity-50"></div>
554+
<div class="text-blue text-opacity-50"></div>
555+
<div class="bg-red-400"></div>
556+
<div class="bg-red-500"></div>
557+
<div class="bg-red-600"></div>
558+
<div class="bg-green bg-opacity-50"></div>
559+
<div class="bg-white bg-opacity-50"></div>
560+
```
529561
**Output:**
530562

531563
```css
532564
:root {
533565
--colors-primary: #ff0;
534566
--colors-secondary: #000000;
535567
--colors-gray: #6B7280;
568+
--colors-blue: rgb(0,0,254);
569+
--colors-red-400: rgba(254,0,0,0.5);
570+
--colors-red-500: rgba(254,0,0,1);
571+
--colors-red-400-rgb: 254,0,0;
572+
--colors-red-500-rgb: 254,0,0;
573+
--colors-green: rgb(0,255,0);
536574
--colors-primary-rgb: 255,255,0;
537575
--colors-secondary-rgb: 0,0,0;
538-
--colors-gray-rgb: 107,114,128
576+
--colors-gray-rgb: 107,114,128;
577+
--colors-blue-rgb: 0,0,254;
578+
--colors-green-rgb: 0,255,0;
579+
--sizes-small: 10px;
580+
--sizes-medium: 2rem;
581+
--sizes-large: 100%
539582
}
540583

541584
.text-primary {
542585
--tw-text-opacity: 1;
543586
color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
544587
}
545588

589+
.text-blue {
590+
--tw-text-opacity: 1;
591+
color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
592+
}
593+
594+
.text-opacity-50 {
595+
--tw-text-opacity: 0.5
596+
}
597+
546598
.bg-secondary {
547599
--tw-bg-opacity: 1;
548600
background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
549601
}
550602

603+
.bg-white {
604+
--tw-bg-opacity: 1;
605+
background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
606+
}
607+
608+
.bg-red-400 {
609+
--tw-bg-opacity: 1;
610+
background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
611+
}
612+
613+
.bg-red-500 {
614+
--tw-bg-opacity: 1;
615+
background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
616+
}
617+
618+
.bg-red-600 {
619+
background-color: var(--colors-red-500)
620+
}
621+
551622
.bg-gray {
552623
background-color: var(--colors-gray)
553624
}
625+
626+
.bg-green {
627+
background-color: var(--colors-green)
628+
}
629+
630+
.bg-opacity-50 {
631+
--tw-bg-opacity: 0.5
632+
}
554633
```
555634

556635
## Kendi eklentileriniz için API örneği

0 commit comments

Comments
 (0)