Remix – стилизация с помощью TailwindCSS 3.0 🚨

Приложение 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