У нас сделано еще так src/app/(site) и еще в корне стиль @tailwind

disel

base; @tailwind components; @tailwind utilities; body { color: var(—foreground); background: var(—background); font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } }

Объяснение структуры проекта и настройки Tailwind CSS

Судя по вашему описанию, у вас используется структура проекта с папкой src/app/(site) и Tailwind CSS для стилизации. Давайте разберем, как это работает и как правильно настроить проект.

1. Структура проекта с src/app

Next.js 13+ поддерживает App Router, который позволяет использовать папку app вместо традиционной pages. В вашем случае структура выглядит примерно так:

javascript

src/
├── app/
│   ├── (site)/
│   │   ├── page.js         // Главная страница
│   │   ├── layout.js       // Общий макет для (site)
│   ├── globals.css         // Глобальные стили (включая Tailwind)
├── components/
│   ├── MainContent.js      // Компонент
  • page.js: Это файл, который рендерит главную страницу для маршрута /.
  • layout.js: Это файл, который задает общий макет для всех страниц в папке (site). Он может включать, например, шапку, футер или стили.
  • globals.css: Файл для глобальных стилей, где вы подключаете Tailwind CSS.

2. Настройка Tailwind CSS

Чтобы Tailwind CSS работал в вашем проекте, нужно выполнить несколько шагов:

Установка Tailwind CSS

Если Tailwind CSS еще не установлен, выполните команду:

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Конфигурация tailwind.config.js

После выполнения команды npx tailwindcss init создается файл tailwind.config.js. Настройте его так, чтобы Tailwind знал, где искать файлы для генерации классов:

javascript

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx}", // Учитываем файлы в папке app
    "./src/components/**/*.{js,ts,jsx,tsx}", // Учитываем компоненты
  ],
  theme: {
    extend: {
      colors: {
        foreground: "#333333",
        background: "#ffffff",
      },
    },
  },
  plugins: [],
};

Подключение Tailwind в globals.css

В файле src/app/globals.css вы уже подключили Tailwind CSS. Вот пример правильного содержимого:

css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

Этот файл автоматически подключается через layout.js в App Router.

3. Файл layout.js

Файл layout.js в папке (site) задает общий макет для всех страниц. Пример:

javascript

export const metadata = {
  title: "My Site",
  description: "This is my Next.js site with Tailwind CSS",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

4. Файл page.js

Файл page.js рендерит главную страницу. Пример вашего кода:

javascript

"use client";

import Container from "@mui/material/Container";
import MainContent from "../../components/MainContent";

export default function Home() {
  return (
    <Container
      maxWidth="lg"
      component="main"
      sx={{ display: "flex", flexDirection: "column" }}
    >
      <MainContent />
    </Container>
  );
}

5. Проверка работы Tailwind CSS

Чтобы убедиться, что Tailwind CSS работает, добавьте класс в компонент, например:

javascript

export default function Home() {
  return (
    <div className="bg-blue-500 text-white p-4">
      <h1 className="text-2xl font-bold">Hello, Tailwind CSS!</h1>
    </div>
  );
}

Если стили применяются, значит Tailwind настроен правильно.

6. Запуск проекта

Запустите проект с помощью команды:

bash

npm run dev

Приложение будет доступно по адресу http://localhost:3000.

7. Частые проблемы

Если Tailwind CSS не работает:

  1. Убедитесь, что tailwind.config.js правильно настроен и включает пути к файлам в src/app и src/components.
  2. Проверьте, что globals.css подключен через layout.js.
  3. Убедитесь, что вы перезапустили сервер после внесения изменений.

Если у вас есть дополнительные вопросы или проблемы, дайте знать! 😊

Похожие записи/страницы: