Домашняя страница 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.

    Terminal
    npm install -D tailwindcssnpx tailwindcss init --ts

  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.jsx.

    root.tsx
    import stylesheet from "~/tailwind.css";

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>
  )
}