Fillimi

Së pari, krijoni një projekt React me Creative-react-app:

npx create-react-app react-tailwindcss

nëse Create React App version ‹ 5.0:

npx create-react-app@latest react-tailwindcss

or

npx [email protected] react-tailwindcss

Instaloni TailwindCSS

Instaloni varësitë e kërkuara për Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer

Më pas, gjeneroni skedarin tuaj të konfigurimit tailwind.config.js për projektin tuaj duke përdorur programin Tailwind CLI të përfshirë kur instaloni paketën tailwindcss npm:

npx tailwindcss init

Ai do të ketë përmbajtjen e mëposhtme:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Përdorni flamurin -p nëse dëshironi të gjeneroni gjithashtu një skedar bazë postcss.config.js së bashku me skedarin tuaj tailwind.config.js:

npx tailwindcss init -p

Kjo do të gjenerojë një skedar postcss.config.js në projektin tuaj që duket kështu:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Së pari, ne do të ndryshojmë çelësin content në tailwind.config.js:

content: ["./src/**/*.{js,jsx,ts,tsx}"],

Përfshini Tailwind në CSS tuaj

Përdorni direktivën @tailwind për të përfshirë bazën, përbërësit dhe stilet e shërbimeve të Tailwind, duke zëvendësuar përmbajtjen origjinale të skedarit:

@tailwind base;
@tailwind components;
@tailwind utilities

Le të fillojmë serverin tani. Ekzekutoni komandën e mëposhtme:

npm start

Ju mund të shikoni një demonstrim të faqes së internetit që ne po krijojmë "këtu"