🌈Tailwind நிறம் உருவாக்கி

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 இன் எழுதும் முறை：v4 இன் எழுதும் முறை, @theme க்குள் "--color-primary-500: #3B82F6;" போன்று நிற பெயர் மற்றும் நிலையை கோடிட்டு இணைத்த மாறி பெயராக எழுதும் வடிவம் ஆகும்.