Tailwind litatöflugerð

Búðu til 11 tónstiga litatöflu (50–950) fyrir Tailwind CSS og stillingakóða út frá einum Hex-kóða

UppfærsluupplýsingarTailwind-litagerð bætt við: búðu til 11 litatóna og stillingakóða út frá einum litSkoðaðu uppfærslur

Eiginleikar

11 tónstig sjálfkrafa úr einum lit

Innslegni liturinn er settur sem 500 og tónstigin 50–950 reiknuð

Styður bæði v3 og v4

Skiptu milli config- og @theme-ritháttar með flipum

Afritaðu Hex fyrir hvert tónstig

Afritaðu einn lit í einu með hnappi við hvert litasýni

Litataflan uppfærist jafnóðum

Engan keyrsluhnapp þarf; prófaðu og berðu saman liti jafnóðum

Notkun

Sláðu inn Hex grunnlitarins

Sláðu inn Hex-kóða eða smelltu á litasýnið lengst til vinstri og veldu lit í litavalinu

Sláðu inn litaheiti ef þarf

Sláðu inn litaheitið sem notað er í kóðanum með lágstöfum. Sé reiturinn auður er primary notað

Skoðaðu litasýnin í 11 tónstigum

Skoðaðu litasýnin og Hex-kóðana fyrir 50–950 og afritaðu einn lit í einu með afritunarhnappi sýnisins

Veldu úttakssnið og afritaðu

Veldu v3 eða v4 og límdu kóðann inn í tailwind.config.js eða CSS-skrá með „Afrita kóða“

Notkunardæmi

Tónstig fyrir vörumerkjalit

Samræmdu tónstigin fyrir hnappasvif og bakgrunn út frá einum vörumerkjalit

Bættu við lit sem vantar í staðaltöfluna

Bættu lit sem er ekki í stöðluðum Tailwind-litum við stillingaskrána í 11 tónstigum

Gerð @theme-stillinga fyrir v4

Skrifaðu CSS-breytur fyrir Tailwind v4 í einu lagi út frá aðallit vefsins

Undirbúningur fyrir útfærslu hönnunar

Útbúðu 11 tónstiga kóða til útfærslu út frá tilgreindum lit hönnunarinnar og færðu hann einnig inn í hönnunartólið

Grunnþekking

Hvað 50–950 í Tailwind táknar

Litir í Tailwind CSS lýsa birtustigi með 11 þrepa tölum, þar sem 50 er ljósast og 950 dekkst, og 500 er grunngildi litarins. Tölurnar eru settar aftast í klasaheitið, til dæmis „bg-primary-500“ eða „text-primary-700“.

Þrepin 50–300：Þrepin 50–300 eru ljósir litir sem oft eru notaðir í bakgrunn eða létta fyllingu og haldast læsilegir þótt dökkur texti sé settur ofan á þá.
Þrepin 600–950：Þrepin 600–950 eru dökkir litir sem oft eru notaðir fyrir svifástand hnappa eða textalit fyrirsagna og sjást greinilega á hvítum bakgrunni.

Munurinn á litaskilgreiningu í v3 og v4

Í Tailwind CSS v3 eru litir skilgreindir með JavaScript í tailwind.config.js, en í v4 eru þeir skilgreindir sem CSS-breytur inni í @theme í CSS-skrá. Í báðum rithættinum má nota skilgreinda liti með sama klasaheiti, svo sem „bg-primary-500“.

Ritháttur v3：Ritháttur v3 felst í því að skrifa litaheiti og þrep hreiðruð inni í theme.extend.colors, til dæmis „primary: { 500: '#3B82F6' }“.
Ritháttur v4：Ritháttur v4 felst í því að skrifa inni í @theme breytuheiti þar sem litaheiti og þrep eru tengd með bandstriki, til dæmis „--color-primary-500: #3B82F6;“.