React + TypeScript + Vite

React UI-kit

Создание проекта

npm create vite@latest

Подключение tailwindcss

npm install tailwindcss postcss autoprefixer

npx tailwindcss init -p

Отредактируйте tailwind.config.js, чтобы включить:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

src/index.css

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

Оптимизация настроек Tailwind для производства

Tailwind позволяет вам удалить все неиспользуемые CSS, чтобы вы могли отправлять свой проект без каких-либо дополнительных наворотов.

Чтобы настроить это, отредактируйте свой postcss.config.js с помощью:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === "production"
      ? {
          cssnano: {},
        }
      : {}),
  },
};

Добавление темной темы

Добавление различного представления цветов

Создаем файл ./src/styles/palette/theme-[тип темы].css добавляем переменные палитры

@import 'tailwindcss/base';

@layer base {
  :root[data-theme~="dark"] {
    --color-primary: #43ee00;
    --color-primary-100: #cce3fd;
  }
}

и для базового типа

@import 'tailwindcss/base';

@layer base {
  :root {
    --color-primary: #006FEE;
    --color-primary-100: #cce3fd;
  }
}

Далее добавляем файл ./src/config/colors.ts Далее этот объект будет разименован в theme.extend.colors

export default {
  primary: {
    DEFAULT: "var(--color-primary)",
    100: "var(--color-primary-100)",
  },
};

В файле tailwind.config.js добавляем следующий фрагмент

import customColors from "./src/config/colors.ts";

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "data-theme",
  theme: {
    extend: {
      colors: {
        ...customColors,
      },
    },
  }
};