Домашняя страница Tailwind CSS
  1. Установка
  2. Установите Tailwind CSS c Remix

  1. Создайте свой проект

    Начните с создания нового проекта Remix, если у вас его еще нет. Самый распространенный подход — использовать Создать Remix.

    Terminal
    npx create-remix@latest my-projectcd my-project

  2. Установите Tailwind CSS

    Установите tailwindcss через npm, а затем запустите команду init для генерации файлов tailwind.config.ts и postcss.config.js.

    Terminal
    npm install -D tailwindcss@3 postcss autoprefixernpx tailwindcss init --ts -p

  3. Настройте пути к шаблону

    Добавьте пути ко всем файлам шаблонов в файл tailwind.config.ts.

    tailwind.config.ts
    import type { Config } from 'tailwindcss'

export default {
  content: ['./app/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

  4. Добавьте директивы Tailwind в свой CSS

    Создайте файл ./app/tailwind.css и добавьте директивы @tailwindдля каждого слоя Tailwind.

    tailwind.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. Импортируйте файл CSS

    Импортируйте вновь созданный файл ./app/tailwind.css в свой файл ./app/root.tsx.

    root.tsx
    import type { LinksFunction } from "@remix-run/node";
import stylesheet from "~/tailwind.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
];

  6. Начните процесс сборки

    Запустите процесс сборки с помощью npm run dev.

    Terminal
    npm run dev

  7. Начните использовать Tailwind в своем проекте

    Начните использовать классы утилит Tailwind для оформления своего контента.

    _index.tsx
    export default function Index() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}