Úvod
Tailwind se ukázal jako docela šikovný framework CSS. Podobné jako Bootstrap, s výjimkou větší flexibility a přizpůsobení. Pokud jde o výběr rámce v Reactu, existují další možnosti, ale Tailwind prostě dává smysl ke mě. Dnes bych se tedy rád podělil o velmi snadný způsob, jak jej nastavit v Reactu!
Instalace Tailwind
Krok 1:Závislost
První věc, kterou chcete udělat (za předpokladu, že máte Node.js), je npm install tailwindcss
. Tím se uloží jako závislost na vašem projektu.
Krok 2:tailwind.css
Vytvořte tailwind.css
soubor pod vaším src/
soubor. Dále zahrňte tento obsah dovnitř:
@tailwind base;
@tailwind components;
@tailwind utilities;
Krok 3:Skripty
Dále musíme povolit tailwindu, aby při spuštění naší aplikace zkompiloval CSS do nového souboru. Abychom to mohli udělat, potřebujeme spustit nějaké předsestavení skripty. Zamiřte do package.json
a aktualizujte skript tímto:
"scripts": {
"build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
"prestart": "npm run build:tailwind",
"prebuild": "npm run build:tailwind",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Tím se nakonec vytvoří nový tailwind.output.css
soubor při spuštění naší aplikace.
Krok 4:Zpřístupnění
Teď už jen potřebujeme udělat tailwind.output.css
přístupné celé naší aplikaci. Přejděte na index.js
a umístěte tento řádek kamkoli na začátek souboru:
import './tailwind.output.css';
A je to tak snadné! Vše je připraveno k použití Tailwind ve vaší aplikaci React. Stačí jej spustit pomocí npm start
!
Závěr
Jako někdo, kdo není tak docela zkušený designér, zjistil jsem, že Tailwind funguje dobře i v pokročilejších aplikacích/knihovnách. Design je své vlastní zvíře a je snadné se ztratit v samotném vytváření uživatelského rozhraní, než se pustíte do přihlouplé a drsné logiky vaší aplikace. Je lepší design zefektivnit a vše fungovat než to uděláte hezkým .
Doufám, že se vám tento návod pro rychlé nastavení líbil!
Šťastné úterý! 🎉