Reagovat + Tailwind

Ú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ý! 🎉