Предполагая, что у вас есть структура приложения, созданная create-react-app, вот очень простые шаги для начала работы. В инструкциях используется npm, но я уверен, что эти шаги можно легко проделать и с пряжей.

1. Во-первых, объедините App.css с index.css вместе с другими моими файлами css вместе, чтобы объединить их в один index.css файл, затем переместите его в новую папку в src/css. Хотя это и не является технически необходимым, я предпочитаю иметь чистую файловую структуру. Если вы этого не сделаете, вам придется изменить пути к каталогам, которые я укажу на более поздних этапах.

2. Затем установите Tailwind с npm install tailwindcss --save-dev

3. Добавить

@tailwind base; 
@tailwind components; 
@tailwind utilities;

вверху index.css (или как там вы называете свой «главный» файл css). Во время сборки Tailwind заменит их сгенерированным CSS.

4. Внутри каталога css запустите npx tailwind init. Это создаст ваш файл конфигурации в src/css/tailwind.config.js, где вы сможете настраивать темы или добавлять плагины. Подробнее читайте в документации по конфигурации.

5. В package.json измените строчки

to

Теперь запуск _11 _ / _ 12_ автоматически создаст для вас Tailwind CSS.

6. Наконец, в вашем index.js файле измените строку

import ‘./index.css’;

to

import ‘./css/tailwind.css’;

7. Запустите npm start и проверьте! Чтобы получить представление о Tailwind, попробуйте изменить className=”App” на className=”text-center”. Если Tailwind выдает ошибки, прочтите официальную документацию по установке для устранения неполадок.

Я настоятельно рекомендую ознакомиться с документацией по попутному ветру и поискать свойства CSS, с которыми вы пытаетесь работать. Практически в каждой записи есть примеры создания кнопок, ящиков и т. Д.

Развлекайся!