Наскоро, докато работех върху уебсайт, открих, че ще трябва да създам компонент на бутон, за да улесня работния си процес (тъй като имаше доста бутони за добавяне).

Въпреки това, след някои проби и грешки, плюс търсене във форуми и блогове, реших да потърся друго решение на моя проблем.

Това решение беше със стилизирани компоненти и беше доста лесно. Всичко, от което имах нужда, бяха реквизити!

Така че това ме накара да се замисля: мога ли също да използвам подпори, за да създам компонент на бутон с Tailwind CSS? Това е моето решение:

Първа стъпка: Създайте приложение React заедно с TailwindCSS

С npm:

npx create-react-app my-project
cd my-project

npm install -D tailwindcss
npx tailwindcss init

С прежда:

yarn create react-app react-tailwind-css-stater
yarn add -D tailwindcss postcss autoprefixer

yarn tailwindcss init -p

Във вашия глобален CSS файл добавете следното:

@tailwind base;
@tailwind components;
@tailwind utilities

След като направите това, трябва да настроите своя tailwind.config.js файл и да стартирате своя сървър за разработка с npm start или yarn run dev.

Само в случай, че трябва да настроите персонализирани цветове във вашия tailwind.config.js файл, сега е моментът да го направите. Ето как изглежда моята.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
      'darkBlue': '#151421',
      'whiteBG': '#FFFFFF',
      },
    },
  },
  plugins: [],
}

След това създайте компонент на бутон в папка, наречена components. Ще кръстя моето Button

//inside Button.js
const Button = () => {
return (
  <button></button>
)
};

export default Button;

Сега за забавната част: предаваме props на компонента, за да ни помогне да персонализираме всеки бутон според желания от нас вкус.

const Button = ({bg, btnText, textColor}) => {
return (
<button></button>
)
};

export default Button;

Сега добавихме 3 подпори към компонента. bg за фона на бутона, btnText за съдържанието на текста и textColor за цвета на текста. Сега нека видим как да внедрим това в нашите класове помощни програми Tailwind.

const Button = ({bg, btnText, textColor}) => {
return (
<button className={`bg-${bg} py-4 px-7 text-${textColor}`}>{btnText}</button>
)
};

export default Button;

Както се вижда тук, използвахме обратни точки вместо кавички, за да можем да използваме нашите проп стойности. След това импортираме нашия Button компонент във всеки .js файл, в който искаме компонентът да се появи, и използваме подпорите, които сме създали. Аз кръстих моето App.js

//import button component in App.js
import Button from "./components/Button";

const App = () => {
return (
  <Button bg={'darkBlue'} btnText={'Follow me'} textColor={'whiteBG'}></Button>
//could also be written as
<Button bg={'darkBlue'} btnText={'Follow me'} textColor={'whiteBG'}/>

//remember I added custom colors in my tailwind config file, so you color names may differ
)
}

В примера по-горе сме използвали реквизита по съответния начин. Забележете как в App.js компонентът Button може да бъде написан по два начина: отварящи и затварящи тагове и самозатварящи се тагове.

Сега имам много опции за бутони въз основа на цвят и текстово съдържание въз основа на това колко изисква моят проект.

Ако сте намерили тази публикация за полезна, моля, споделете с приятел и ме последвайте.

Благодаря за четенето :)