Как использовать Tailwind CSS в Remix

Tailwind CSS стал очень популярным вариантом для стилизации приложений. В нем используются атомарные утилитные классы, которые предварительно настроены с хорошими значениями по умолчанию, что позволяет легко начать работу. Remix — это JavaScript-фреймворк, цель которого — сделать создание готового к производству приложения проще, чем когда-либо. Он использует React для слоя пользовательского интерфейса. Совместное использование Remix и Tailwind CSS — это действительно мощный вариант для быстрого создания приложений. Чтобы начать работу с Tailwind CSS в свежем приложении Remix, мы выполним следующие команды для создания приложения Remix или перейдем непосредственно к настройке Tailwind.

Содержание

Настройка Remix
Настройка Tailwind CSS
K-Pop Stack

Настройка 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 для базы данных.