Jak vytvořit předvolbu v Tailwindu

Jak Vytvorit Predvolbu V Tailwindu



Tailwind CSS ” provede všechny své vlastní konfigurace v souboru „tailwind.config.js“, který se automaticky sloučí s výchozí konfigurací. V takových případech, ' Předvolby Tailwind ” pomáhá uživatelům samostatně vytvářet vlastní konfigurace. „Předvolby Tailwind“ je v podstatě uživatelsky opakovaně použitelná konfigurace, která určuje samostatnou konfiguraci, kterou lze použít jako základní. Poskytuje nejjednodušší způsob, jak vytvořit přizpůsobení, které chce uživatel znovu použít ve více projektech. Pomáhá uživatelům zcela nahradit výchozí konfiguraci Tailwind.

Tento článek podrobně popisuje úplný postup vytvoření předvolby v Tailwindu.

Jak vytvořit „předvolbu“ v Tailwindu?

Tailwind“ Předvolby ” jsou považovány za běžné konfigurační objekty, které specifikují stejnou konfiguraci, jaká je uvedena v konfiguračním souboru “tailwind.config.js”. Soubor „přednastavení“ není ve výchozím nastavení vytvořen, lze jej však vytvořit podle níže uvedených kroků:







Krok 1: Vytvořte soubor „Preset“.



Nejprve vytvořte „ preset.js ” v projektu Tailwind a přidejte všechny požadované možnosti konfigurace, jako jsou rozšíření, přepsání motivu, přidávání pluginů a mnoho dalšího:



// Příklad přednastavení
modul. exportů = {
téma : {
barvy : {
modrý : {
světlo : '#85d7ff' ,
VÝCHOZÍ : '#1fb6ff' ,
temný : '#009 sedlo' ,
} ,
růžový : {
světlo : '#ff7ce5' ,
VÝCHOZÍ : '#ff49db' ,
temný : '#ff16d1' ,
} ,
šedá : {
nejtemnější : '#1f2d3d' ,
temný : '#3c4858' ,
VÝCHOZÍ : 'in #c0cc' ,
světlo : '#e0e6ed' ,
nejlehčí : '#f9fafc' ,
}
} ,
fontFamily : {
bez : [ 'grafický' , 'sans serif' ] ,
} ,

Lis ' Ctrl+S ” pro uložení výše uvedeného souboru.





Krok 2: Upravte soubor „tailwind.config.js“.

Dále přejděte na „ tailwind.config.js “, zadejte název cest šablony a také zadejte „ preset.js soubor s příponou „ předvolby klíčové slovo:



modul. exportů = {
obsah : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
předvolby : [
( 'preset.js' )
]
}

Lis ' Ctrl+S ” pro uložení souboru.

Krok 3: Spusťte aplikaci

Nyní spusťte stávající „ rychlý projekt ” na vývojovém serveru zadáním následujícího příkazu:

npm spustit dev

Nakonec kliknutím na odkaz „localhost“ zobrazíte výstup.

Výstup

Jak je vidět, výstup vrací projekt vite se stylem „Tailwind CSS“.

Závěr

V Tailwindu vytvořte „ přednastavení “ v projektu a zadejte všechny konfigurace “ tailwind.config.js ” soubor v něm. Poté zadejte soubor „preset.js“ v souboru „tailwind.config.js“ pomocí klíčového slova „preset“. Nově vytvořený soubor „preset.js“ vloží všechny vlastní CSS do zadané šablony stejně jako soubor „tailwind.config.js“. Tento článek demonstroval úplný postup vytvoření předvolby v Tailwindu.