Tailwind ಬಣ ಸೃಷ್ಟಿ
1 ಬಣದ Hex ಕೋಡಿನಿಂದ Tailwind CSS ನ 50–950 ನ 11 ದರ್ಪಣ ಪ್ಯಾಲೆಟ್ ಮತ್ತು ಸೆಟಿಂಗ್ ಕೋಡ್ ಸೃಷ್ಟಿ
ವೈಶಿಷ್ಟ್ಯಗಳು
1 ಬಣದಿಂದ 11 ದರ್ಪಣ ಸ್ವಯಂ ಸೃಷ್ಟಿ
ನೀವು ನಮೂದಿಸಿದ ಬಣವನ್ನು 500 ಗೆ ಹೊಂದಿಸಿ, 50–950 ನ ಗಾಢತೆಯನ್ನು ಲೆಕ್ಕಹಾಕಿ
v3 ಮತ್ತು v4 ಎರಡು ಸ್ವರೂಪವನ್ನು ಬೆಂಬಲಿಸಿ
config ಮತ್ತು @theme ಬರೆಯುವ ವಿಧಾನವನ್ನು ಟ್ಯಾಬ್ನಲ್ಲಿ ಬದಲಿಸಿ
ದರ್ಪಣ ಪ್ರತಿ Hex ಕಾಪಿ
ಪ್ರತಿ ಬಣ ಮಾದರಿಯ ಬಟನ್‌ನಿಂದ ಕಲರ್ ಕೋಡನ್ನು ಒಂದು ಬಣ ಒಂದೊಮ್ಮೆ ಕಾಪಿ
ಇನ್‌ಪುಟ್ ಮತ್ತೊಂದೆ ಪ್ಯಾಲೆಟ್ ನವೀಕರಣ
ನಿರ್ವಾಹಕ ಬಟನ್ ಇಲ್ಲದೇ ಬಣವನ್ನು ಪ್ರಯತ್ನ ಮಾಡುವಾಗ ಹೋಲಿಸಿ
ಬಳಕೆಯ ವಿಧಾನ
ಆಧಾರ ಬಣದ Hex ನಮೂದಿಸಿ
Hex ಕೋಡನ್ನು ನಮೂದಿಸಿ ಅಥವಾ ಎಡ ಅಂಚಿನ ಬಣ ಮಾದರಿಯನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಕಲರ್ ಪಿಕರ್‌ನಲ್ಲಿ ಆಯ್ಕೆ ಮಾಡಿ
ಅವಶ್ಯಕತೆ ಅನುಸಾರ ಬಣದ ಹೆಸರು ನಮೂದಿಸಿ
ಕೋಡ್‌ನಲ್ಲಿ ಬಳಸುವ ಬಣದ ಹೆಸರನ್ನು ಚಿಕ್ಕ ಇಂಗ್ರೆಜಿಯಲ್ಲಿ ನಮೂದಿಸಿ. ಖಾಲಿಯಾಗಿದ್ದರೆ primary ಬಳಸಿ
11 ದರ್ಪಣ ಬಣ ಮಾದರಿ ಪರೀಕ್ಷೆ ಮಾಡಿ
50–950 ನ ಬಣ ಮಾದರಿ ಮತ್ತು Hex ಕೋಡ ಪರೀಕ್ಷೆ ಮಾಡಿ, ಮಾದರಿಯ ಕಾಪಿ ಬಟನ್‌ನೊಂದಿಗೆ ಒಂದು ಬಣ ಒಂದೊಮ್ಮೆ ಕಾಪಿ
ಔಟ್‌ಪುಟ್ ಸ್ವರೂಪ ಆಯ್ಕೆ ಮತ್ತು ಕಾಪಿ
v3 ಅಥವಾ v4 ಆಯ್ಕೆ ಮತ್ತು "ಕೋಡ್ ಕಾಪಿ" ರಿಂದ tailwind.config.js ಅಥವಾ CSS ಫೈಲ್‌ಗೆ ಅಂಟಿಸಿ
ಉಪಯೋಗ ಪ್ರಸಂಗ
ಬ್ರಾಂಡ್ ಬಣದ ಗಾಢತೆ ಸೃಷ್ಟಿ
ಬಟನ್‌ಗಳ ಹೋವರ್ ಮತ್ತು ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಬಳಸುವ ಗಾಢತೆಯನ್ನು ಬ್ರಾಂಡ್ ಬಣದಿಂದ ಸರಿಪಡಿಸಿ
ಪ್ರಮಾಣಿತ ಪ್ಯಾಲೆಟ್‌ನಲ್ಲಿ ಇಲ್ಲದ ಬಣವನ್ನು ಸೇರಿಸಿ
Tailwind ಪ್ರಮಾಣಿತ ಬಣದಲ್ಲಿ ಇಲ್ಲದ ಪ್ರಕಲ್ಪ ಅನನ್ಯ ಬಣವನ್ನು 11 ದರ್ಪಣದಲ್ಲಿ ಸೆಟಿಂಗ್ ಫೈಲ್‌ಗೆ ಸೇರಿಸಿ
v4 ನ @theme ಸೆಟಿಂಗ್ ಸೃಷ್ಟಿ
ಸೈಟ್‌ನ ಮುಖ್ಯ ಬಣದಿಂದ Tailwind v4 ನ CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ರಚಿಸಿ
ಡಿಸೈನ್ ಅರೆಗುಣವುದೆ ಅಳವಡಿಕೆ ತಯಾರಿ
ಕ್ಯಾಂಪ್‌ನ ನಿರ್ಧಿಷ್ಟ ಬಣದಿಂದ ಅಳವಡಿಕೆ 11 ದರ್ಪಣ ಕೋಡ ತಯಾರಿಸಿ, ಡಿಸೈನ್ ಸಾಧನದಲ್ಲೂ ಪುನರೀಕ್ಷಣ ಮಾಡಿ
ಮೂಲ ಜ್ಞಾನ
Tailwind ನ 50–950 ಎಂದರೆ ಏನು
Tailwind CSS ನ ಬಣವು 50 ಬೆಳಕಿನ ಮತ್ತು 950 ಅತಿ ಗಾಢ ಎಂದು 11 ಹಂತದ ಸಂಖ್ಯೆಯೊಂದಿಗೆ ಝಲಕವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಮತ್ತು 500 ಆ ಬಣದ ಆಧಾರ ಆಗಿದೆ. ಸಂಖ್ಯೆಗಳನ್ನು "bg-primary-500" ಅಥವಾ "text-primary-700" ನಂತೆ ಕ್ಲಾಸ್ ಹೆಸರಿನ ಅಂತ್ಯದಲ್ಲಿ ಸೇರಿಸಿಕೊಂಡು ಬಳಸಲಾಗುತ್ತದೆ.
- 50–300 ಹಂತ：50–300 ಹಂತ ಹಿನ್ನೆಲೆ ಬಣ ಮತ್ತು ಬೆಳಕಿನ ತುಂಬು ಅಗತ್ಯ ಬಳಕೆ ತೆಲುಗು ಬಣವಾದ ಮೇಲೆ ಗಾಢ ಪಠ್ಯ ಪರಿವರ್ತನೆ ಸುಲಭವಾಗಿ ಓದಬಲ್ಲ ಬಣ.
- 600–950 ಹಂತ：600–950 ಹಂತ ಬಟನ್ ಹೋವರ್ ಮತ್ತು ಶೀರ್ಷಿಕೆ ಪಠ್ಯ ಬಣದಲ್ಲಿ ಬಳಕೆ ಗಾಢ ಬಣವಾದ ಬೇಳಾಗ ಸಮವರ್ತನೆ ಹಿನ್ನೆಲೆಯೇ ಸ್ಪಷ್ಟ ಕಾಣುವ ಬಣ.
v3 ಮತ್ತು v4 ಬಣ ವ್ಯಾಖ್ಯಾನ ವಿಧಾನ ವ್ಯತ್ಯಾಸ
Tailwind CSS ನ v3 ರಲ್ಲಿ ಬಣವನ್ನು tailwind.config.js ನ JavaScript ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಿ, v4 ರಲ್ಲಿ CSS ಫೈಲ್‌ನ @theme ನ ಲೋಪ CSS ವೇರಿಯಬಲ್ ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಯಾವುದೇ ಬರೆಯುವ ವಿಧಾನದಲ್ಲೂ, ವ್ಯಾಖ್ಯಾನಿತ ಬಣವನ್ನು "bg-primary-500" ನಂತೆ ಅದೇ ಕ್ಲಾಸ್ ಹೆಸರಿನಲ್ಲಿ ಬಳಸಬಹುದು.
- v3 ಬರೆಯುವ ವಿಧಾನ：v3 ಬರೆಯುವ ವಿಧಾನ theme.extend.colors ನ ಲೋಪದಲ್ಲಿ "primary: { 500: '#3B82F6' }" ನಂತೆ ಬಣ ಹೆಸರು ಮತ್ತು ಹಂತವನ್ನು ನೆಸ್ಟೆಡ್ ಆಗಿ ಬರೆಯುವ ಸ್ವರೂಪ.
- v4 ಬರೆಯುವ ವಿಧಾನ：@theme ನ ಲೋಪದಲ್ಲಿ "--color-primary-500: #3B82F6;" ನಂತೆ ಬಣ ಹೆಸರು ಮತ್ತು ಹಂತವನ್ನು ಹೈಫನ್ ನಿರ್ಗಮನ ವೇರಿಯಬಲ್ ಹೆಸರಿನಲ್ಲಿ ಬರೆಯುವ ಸ್ವರೂಪ.
ಸುರಕ್ಷತೆ ಮತ್ತು ಗೌಪ್ಯತೆ
ಬ್ರೌಸರ್‌ನಲ್ಲೇ ಪೂರ್ಣ
ಇನ್‌ಪುಟ್ ಡೇಟಾವನ್ನು ನೀವು ಬಳಸುವ ಬ್ರೌಸರ್‌ನ ಒಳಗೆ ಮಾತ್ರ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗುತ್ತದೆ, ಬಾಹ್ಯವಾಗಿ ಕಳುಹಿಸಲಾಗುವುದಿಲ್ಲ.
ಬ್ರೌಜರ್ ಒಳಗೆ ಮಾತ್ರ ಪ್ರಕ್ರಿಯೆ
ಪ್ಯಾಲೆಟ್ ಲೆಕ್ಕಹಾಕುವಿಕೆ ಮತ್ತು ಕೋಡ್ ಉತ್ಪಾದನೆ ನಿಮ್ಮ ಬ್ರೌಜರ್ ಒಳಗೆ ಪೂರ್ಣವಾಗಿ ನಡೆಯುತ್ತದೆ, ಇನ್‌ಪುಟ್ ಡೇಟಾವನ್ನು ಸರ್ವರ್‌ಗೆ ಕಳುಹಿಸಲಾಗುವುದಿಲ್ಲ.
ಸಂವಹನ HTTPS ಮೂಲಕ ಎನ್‌ಕ್ರಿಪ್ಟ್ ಆಗಿದೆ
ಪುಟದ ಲೋಡ್ ಕೂಡ TLS ಮೂಲಕ ಎನ್‌ಕ್ರಿಪ್ಟ್ ಆಗಿದೆ, ಮೂರನೇ ವ್ಯಕ್ತಿಯೋ ಸಂತಿ ಓದಿಕೊಳ್ಳುವುದಿಲ್ಲ.
ಮೂರನೇ ವ್ಯಕ್ತಿಗೆ ಕಳುಹಿಸುವುದು ಇಲ್ಲ
ಜಾಹೀರಾತು ನೆಟ್‌ವರ್ಕ್ ಅಥವಾ ಟ್ರ್যಾಕರ್‌ಗಳಂತಹ ಬಾಹ್ಯ ಸೇವೆಗಳಿಗೆ ಇನ್‌ಪುಟ್ ವಿಷಯವನ್ನು ಕಳುಹಿಸುವುದಿಲ್ಲ.
ಫಲಿತಾಂಶಗಳ ಸ್ವಯಂ ಶೇವಣೆ ಇಲ್ಲ
ನಿವೇಶಿಸಿದ ಬಣ ಮತ್ತು ಬಣ ಹೆಸರು ಅಥವಾ ಇನ್‌ಪುಟ್ ಶಿಫಾರಸುಗಳನ್ನು ಸರ್ವರ್‌ನಲ್ಲಿ ಶೇಖರಿಸುವುದಿಲ್ಲ.
Google ಹುಡುಕರಲ್ಲಿ RAKKOTOOLS ಅನುಸರಿಸಿ
187ಟಿ ಉಪಯುಕ್ತ ಸಾಧನಗಳು, Google ಹುಡುಕ ಮತ್ತು AI ಹುಡುಕದಿಂದ ಸುಲಭವಾಗಿ ಕಂಡುಬರುತ್ತವೆ!
- ಹುಡುಕದಲ್ಲಿ ಕಂಡುಬರುತ್ತೆ
- AI ಹುಡುಕದಲ್ಲಿಯೂ ಪ್ರದರ್ಶಿತವಾಗುತ್ತೆ
- ಹೊಸ ಸಾಧನವೂ ಪತ್ತೆ ಸಿಗುತ್ತೆ
ನವೀಕರಣ ಮಾಹಿತಿ
- update #318
Tailwind ಬಣ್ಣ ಪೀಳಿಸುವಿಕೆ ಸೇರಿಸಲಾಗಿದೆ, 1 ಬಣ್ಣದಿಂದ 11 ಶ್ರೇಣಿಗಳ ಬಣ್ಣ ಮತ್ತು ಸಂರೂಪಣೆ ಕೋಡ್ ರಚಿಸಿ