Недавно, работая над веб-сайтом, я обнаружил, что мне нужно создать компонент кнопки, чтобы упростить рабочий процесс (поскольку нужно было добавить довольно много кнопок).

Однако после проб и ошибок, а также поиска по форумам и блогам я решил поискать другое решение моей проблемы.

Это решение было со стилизованными компонентами, и оно было довольно простым. Мне нужен был только реквизит!

Так что это заставило меня задуматься: могу ли я также использовать props для создания компонента кнопки с помощью Tailwind CSS? Это мое решение:

Шаг первый: создайте приложение React вместе с TailwindCSS

С нпм:

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 может быть написан двумя способами: с открывающими и закрывающими тегами и с самозакрывающимися тегами.

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

Если вы нашли этот пост полезным, пожалуйста, поделитесь им с другом, а также подпишитесь на меня.

Спасибо за прочтение :)