За последние пару лет TypeScript начал набирать обороты в мире React и теперь имеет официальную поддержку в create-react-app. Использование TypeScript позволяет нам получить преимущества IntelliSense, а также возможность более подробно рассуждать о нашем коде.
Внедрить TypeScript легко, поскольку файлы можно постепенно обновлять, не вызывая проблем в остальной части вашего проекта.
Почему попутный ветер?
Большинство фреймворков CSS делают слишком много, они поставляются со всевозможными заранее разработанными компонентами, такими как кнопки, карточки и предупреждения, которые могут сначала помочь вам двигаться быстрее, но причинить больше боли, чем они излечивают, когда приходит время выделить ваш сайт с помощью индивидуального дизайна.
Попутный ветер отличается. Вместо самоуверенных предварительно разработанных компонентов,
Tailwind предоставляет низкоуровневые служебные классы, которые позволяют создавать полностью настраиваемые проекты из HTML.
Давайте построим что-нибудь с этими инструментами и посмотрим, насколько хорошо они работают вместе. Для начала у вас должны быть установлены Git, Node.js и Yarn (необязательно, если вы предпочитаете npm).
Откройте свой любимый терминал и запустите:
npx create-react-app tailwind-react --typescript
Это создаст новый проект Create React App в TypeScript, затем нам нужно установить Tailwind CSS в качестве зависимости разработчика.
cd tailwind-react yarn add tailwindcss -D
После завершения установки нам нужно создать файл конфигурации Tailwind CSS. Для этого нам нужно запустить следующую команду:
npx tailwind init
Это инициализирует Tailwind с новым файлом конфигурации в корне вашего проекта. Теперь мы настраиваем нашу «точку входа» CSS. Вы можете делать это где угодно, но вот как я это делаю (если вы измените эти пути, вам нужно будет изменить их в package.json скриптах далее в этой статье). Создайте src/tailwind.css и вставьте следующее:
@tailwind base; @tailwind components; @tailwind utilities;
Теперь нам нужно добавить собственный скрипт в package.jsonfile. Назовем это tailwind:css . Этот сценарий обновит src/index.css файл с src/tailwind.css .
"scripts": {
"start": "npm run tailwind:css && react-scripts start",
"tailwind:css": "tailwind build src/tailwind.css -c tailwind.config.js -o src/index.css",
"build": "npm run tailwind:css && react-scripts build",
...
}
Настройка завершена, теперь вы можете продолжить и запустить приложение, запустив yarn start в своем терминале. Вы заметите, что ваш файл index.css заполнен кучей css, что является результатом сценария thetailwind:css, который запускается при запуске или сборке вашего приложения. Изучите Git онлайн из лучших руководств по Git, рекомендованных сообществом программистов.
Теперь давайте избавимся от этого App.css файла и воспользуемся некоторыми служебными классами попутного ветра. Замените классы в div и header на классы из приведенного ниже фрагмента.
Помните tailwind.config.jsfile, который был создан ранее, я покажу вам, как вы можете его использовать. Вы можете добавить собственный класс попутного ветра с помощью вспомогательной функции addComponents в массиве плагинов. Во фрагменте ниже вы увидите, как создать класс AppLogo как попутный компонент.
Теперь все готово, просто перезапустите приложение, и ваша целевая страница будет выглядеть, как заголовок изображения выше.
Вы можете найти исходный код на Github.
Удачного кодирования ✌
