Приложение Remix 👋
Я буду использовать стандартную команду create-remix@latest, которая устанавливает наш проект и дает нам демо-сайт.
Установка TailwindCSS с помощью Remix
Откройте терминал и давайте установим tailwindcss, его одноранговые зависимости и параллельно через npm или yarn
npm install -D tailwindcss postcss autoprefixer concurrently
or if you prefer yarn
yarn add -D tailwindcss postcss autoprefixer concurrently
а затем выполните команду init для генерации tailwind.config.js и postcss.config.js.
npx tailwindcss init -p
Давайте обновим наш файл tailwind.config.js, Добавьте пути ко всем файлам шаблонов в файл tailwind.config.js.
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Теперь нам нужно обновить скрипты 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",
}
}
Стили Tailwind
Нам нужно добавить директивы Tailwind в ваш CSS.
Создайте файл ./styles/app.css и добавьте директивы@tailwind
для каждого из слоев Tailwind.
@tailwind base;
@tailwind components;
@tailwind utilities;
Теперь нам нужно добавить ссылки на сгенерированные CSS файлы с помощью ссылок в файле ./app/root.jsx
.
import styles from "./styles/app.css"
export function links() {
return [{ rel: "stylesheet", href: styles }]
}
TailwindCSS настроен в нашем приложении Remix.
Теперь, когда мы запустим npm run dev, он создаст файл tailwind.css в корне папки /app/.
npm run dev
Начните использовать Tailwind в своем проекте 🥳.
Начните использовать утилитные классы Tailwind для стилизации вашего контента.
export default function home() {
return (
<h1 className="text-3xl font-bold ">
Remix + Tailwindcss
</h1>
)
}
Молодцы! 👏
Прочитать оригинальный пост Нажмите
Спасибо, что читаете! Скажи Хэллоу! Twitter