Tailwind CSS стал очень популярным вариантом для стилизации приложений. В нем используются атомарные утилитные классы, которые предварительно настроены с хорошими значениями по умолчанию, что позволяет легко начать работу. Remix — это JavaScript-фреймворк, цель которого — сделать создание готового к производству приложения проще, чем когда-либо. Он использует React для слоя пользовательского интерфейса. Совместное использование Remix и Tailwind CSS — это действительно мощный вариант для быстрого создания приложений. Чтобы начать работу с Tailwind CSS в свежем приложении Remix, мы выполним следующие команды для создания приложения Remix или перейдем непосредственно к настройке Tailwind.
Настройка Remix
-
Выполните команду для запуска CLI.
npx create-remix@latest
-
Назовите свой проект и выберите «Только основы».
- Выберите Netlify из списка целей развертывания.
- Используйте TypeScript или JavaScript — выбор за вами.
- Запустите
npm install
, нажав Y.
- Теперь ваш проект Remix установлен. Вы можете открыть его в своем любимом редакторе кода и начать настройку Tailwind CSS.
Настройка Tailwind CSS
-
Установите необходимые пакеты для Tailwind.
npm install -D tailwindcss postcss autoprefixer concurrently
-
Выполните команду для инициализации Tailwind, это создаст файл
tailwind.config.js
в корне вашего проекта.npx tailwindcss init
-
Откройте только что созданный файл
tailwind.config.js
и добавьте пути к файлам в секцию content.// tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
-
Замените скрипты в
package.json
новыми скриптами Tailwind. Они добавляют два скрипта для генерации CSS-файлов Tailwind и обновляют скриптыbuild
иdev
для использования новых CSS-скриптов. Путь к файлам CSS может быть настроен по необходимости, но по умолчанию он помещает начальный файл в корневой файлstyles/app.css
, а сгенерированный вывод отправляется вapp/styles/app.css
.// package.json { "scripts": { "build": "npm run build:css && remix build", "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css", "dev": "concurrently "npm run dev:css" "remix dev"", "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css" } }
-
Там, где вы установили путь к вашему CSS или расположение по умолчанию
styles/app.css
, создайте начальное расположение для CSS. Из корня вашего проекта выполните следующие команды.mkdir styles touch styles/app.css
-
Добавьте директивы
@tailwind
во вновь созданный файлapp.css
.@tailwind base; @tailwind components; @tailwind utilities;
-
Выполните команду
npm run dev
для генерации выходного CSS-файла вapp/styles/app.css
. -
Импортируйте сгенерированный CSS-файл в файл
app/root.tsx
.import styles from "./styles/app.css" export function links() { return [{ rel: "stylesheet", href: styles }] }
Я столкнулся с одной проблемой, которую хотел бы отметить здесь. Убедитесь, что ваше приложение Remix включает компонент
<Links />
из@remix-run/react
внутри вашего файлаapp/root.tsx
, иначе ссылки не будут добавлены.import { Links } from "@remix-run/react"; import styles from "./styles/app.css" {/* ... */} export function links() { return [{ rel: "stylesheet", href: styles }] } {/* ... */} export default function Root() { return ( <html> <head> <Links /> {/* ... */} </head> {/* ... */} </html> ); }
-
Теперь вы готовы начать использовать классы Tailwind внутри ваших компонентов. Попробуйте сделать это в файле
app/routes/index.tsx
. Удалите встроенный стиль из элемента оберткиdiv
и добавьте классы Tailwind,className="font-sans leading-5 m-4"
. И придайте элементуh1
некоторые стили,className="text-3xl font-bold text-teal-600"
. Убедитесь, что ваш сервер разработки запущен,npm run dev
, и откройте localhost://3000, чтобы увидеть применение стилей Tailwind.export default function Index() { return ( <div className="font-sans leading-5 m-4"> <h1 className="text-3xl font-bold text-teal-600">Welcome to Remix</h1> <ul> <li> <a target="_blank" href="https://remix.run/tutorials/blog" rel="noreferrer" > 15m Quickstart Blog Tutorial </a> </li> <li> <a target="_blank" href="https://remix.run/tutorials/jokes" rel="noreferrer" > Deep Dive Jokes App Tutorial </a> </li> <li> <a target="_blank" href="https://remix.run/docs" rel="noreferrer"> Remix Docs </a> </li> </ul> </div> ); }
K-Pop Stack
Еще один вариант с уже готовой конфигурацией Tailwind CSS — K-Pop Stack. Команда разработчиков шаблонов Netlify создала этот стек, который уже настроен с Tailwind и использует Supabase для базы данных.