បង្កើតពណ៌ Tailwind

បង្កើតក្រាហ្វពណ៌ 50〜950 ចំនួន 11 កម្រិត និងកូដកំណត់រចនាសម្ព័ន្ធរបស់ Tailwind CSS ពីកូដ Hex ពណ៌តែមួយ

ព័ត៌មានធ្វើបច្ចុប្បន្នភាពបន្ថែមឧបករណ៍បង្កើតពណ៌ Tailwind បង្កើតពណ៌ 11 កម្រិតពី 1 ពណ៌ និងកូដការកំណត់មើលព័ត៌មានអាប់ដេត

លក្ខណៈពិសេស

បង្កើតកម្រិតពណ៌ 11 ដោយស្វ័យប្រវត្តិពីពណ៌ 1

ដាក់ពណ៌ដែលបានបញ្ចូលទៅជា 500 រួចគណនាភាពចាស់ទុំពណ៌ពី 50〜950

គាំទ្រទម្រង់ទាំងពីរ v3 និង v4

ប្តូររវាងវិធីសរសេរ config និង @theme តាមថេប

ចម្លង Hex តាមកម្រិតនីមួយៗ

ចម្លងកូដពណ៌ម្តងមួយៗតាមប៊ូតុងនៃគំរូពណ៌នីមួយៗ

ធ្វើបច្ចុប្បន្នភាពក្រាហ្វក្នុងពេលបញ្ចូល

សាកល្បងប្រៀបធៀបពណ៌ដោយមិនចាំបាច់ចុចប៊ូតុងប្រតិបត្តិ

របៀបប្រើ

បញ្ចូល Hex របស់ពណ៌គោល

បញ្ចូលកូដ Hex ឬចុចលើគំរូពណ៌នៅខាងឆ្វេងដើម្បីជ្រើសរើសតាមឧបករណ៍ជ្រើសពណ៌

បញ្ចូលឈ្មោះពណ៌បើចាំបាច់

បញ្ចូលឈ្មោះពណ៌ដែលនឹងប្រើក្នុងកូដជាអក្សរឡាតាំងតូច។ ប្រសិនបើទុកទទេ នឹងប្រើ primary

ពិនិត្យគំរូពណ៌ 11 កម្រិត

ពិនិត្យគំរូពណ៌ និងកូដ Hex ពី 50〜950 រួចចម្លងម្តងមួយៗដោយប៊ូតុងចម្លងនៃគំរូ

ជ្រើសទម្រង់លទ្ធផល ហើយចម្លង

ជ្រើស v3 ឬ v4 រួចចុច「ចម្លងកូដ」ដើម្បីបិទភ្ជាប់ទៅ tailwind.config.js ឬឯកសារ CSS

ករណីប្រើប្រាស់

បង្កើតភាពចាស់ទុំពណ៌ម៉ាក

កំណត់ភាពចាស់ទុំពណ៌ដែលប្រើសម្រាប់ hover ប៊ូតុង ឬផ្ទៃខាងក្រោយ ឲ្យស៊ីគ្នាពីពណ៌ម៉ាកតែមួយ

បន្ថែមពណ៌ដែលមិនមាននៅក្នុងក្រាហ្វស្តង់ដារ

បន្ថែមពណ៌ផ្ទាល់ខ្លួនរបស់គម្រោងដែលមិនមានក្នុងពណ៌ស្តង់ដាររបស់ Tailwind ទៅឯកសារកំណត់រចនាសម្ព័ន្ធជា 11 កម្រិត

បង្កើតការកំណត់ @theme សម្រាប់ v4

សរសេរអថេរ CSS របស់ Tailwind v4 ពីពណ៌ចម្បងនៃគេហទំព័ររួមគ្នា

ត្រៀមសម្រាប់អនុវត្តពីការរចនាគំរូ

ត្រៀមកូដកម្រិតពណ៌ 11 សម្រាប់អនុវត្តពីពណ៌ដែលបានកំណត់ក្នុងគំរូ ហើយចម្លងទៅឧបករណ៍រចនាផងដែរ

ចំណេះដឹងមូលដ្ឋាន

អត្ថន័យនៃលេខ 50〜950 របស់ Tailwind

ពណ៌របស់ Tailwind CSS តំណាងឲ្យកម្រិតពន្លឺដោយលេខ 11 កម្រិត ដែល 50 ស្រាលបំផុត និង 950 ចាស់បំផុត ដោយ 500 ជាពណ៌គោល។ លេខនេះត្រូវបានប្រើនៅខាងចុងឈ្មោះថ្នាក់ដូចជា「bg-primary-500」ឬ「text-primary-700」។

កម្រិត 50〜300：កម្រិត 50〜300 ជាពណ៌ភ្លឺដែលត្រូវបានប្រើជាញឹកញាប់សម្រាប់ពណ៌ផ្ទៃខាងក្រោយ ឬការលាបពណ៌ស្រាល ហើយងាយអានបើដាក់អក្សរពណ៌ចាស់នៅពីលើ។
កម្រិត 600〜950：កម្រិត 600〜950 ជាពណ៌ចាស់ដែលត្រូវបានប្រើជាញឹកញាប់សម្រាប់ hover ប៊ូតុង ឬពណ៌អក្សរក្បាលបទ ហើយមើលឃើញច្បាស់នៅលើផ្ទៃខាងក្រោយពណ៌ស។

ភាពខុសគ្នានៃវិធីកំណត់ពណ៌រវាង v3 និង v4

ក្នុង Tailwind CSS v3 ពណ៌ត្រូវបានកំណត់ដោយ JavaScript ក្នុង tailwind.config.js ចំណែក v4 វិញត្រូវបានកំណត់ជាអថេរ CSS នៅក្នុង @theme របស់ឯកសារ CSS។ មិនថាវិធីណា ពណ៌ដែលបានកំណត់អាចប្រើដោយឈ្មោះថ្នាក់ដូចគ្នា ដូចជា「bg-primary-500」។

វិធីសរសេររបស់ v3：វិធីសរសេររបស់ v3 គឺជាទម្រង់ដាក់ឈ្មោះពណ៌ និងកម្រិតជាថ្នាក់ក្នុង theme.extend.colors ដូចជា「primary: { 500: '#3B82F6' }」។
វិធីសរសេររបស់ v4：វិធីសរសេររបស់ v4 គឺជាទម្រង់ដាក់ឈ្មោះអថេរដោយភ្ជាប់ឈ្មោះពណ៌ និងកម្រិតដោយសញ្ញា hyphen ក្នុង @theme ដូចជា「--color-primary-500: #3B82F6;」។