Предполагая, что у вас есть структура приложения, созданная 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, с которыми вы пытаетесь работать. Практически в каждой записи есть примеры создания кнопок, ящиков и т. Д.
Развлекайся!