Init

README.md

@@ -0,0 +1,121 @@
+# React + TypeScript + Vite
+
+# React UI-kit
+
+## Создание проекта
+
+```js
+npm create vite@latest
+```
+
+## Подключение tailwindcss
+
+```js
+npm install tailwindcss postcss autoprefixer
+```
+
+```js
+npx tailwindcss init -p
+```
+
+Отредактируйте **tailwind.config.js**, чтобы включить:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+src/index.css
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## Оптимизация настроек Tailwind для производства
+
+Tailwind позволяет вам удалить все неиспользуемые CSS, чтобы вы могли отправлять свой проект без каких-либо дополнительных наворотов.
+
+Чтобы настроить это, отредактируйте свой **postcss.config.js** с помощью:
+
+```js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === "production"
+      ? {
+          cssnano: {},
+        }
+      : {}),
+  },
+};
+```
+
+# Добавление темной темы
+
+## Добавление различного представления цветов
+
+Создаем файл **./src/styles/palette/theme-[тип темы].css** добавляем переменные палитры
+
+```css
+@import 'tailwindcss/base';
+
+@layer base {
+  :root[data-theme~="dark"] {
+    --color-primary: #43ee00;
+    --color-primary-100: #cce3fd;
+  }
+}
+```
+
+и для базового типа
+```css
+@import 'tailwindcss/base';
+
+@layer base {
+  :root {
+    --color-primary: #006FEE;
+    --color-primary-100: #cce3fd;
+  }
+}
+```
+
+
+Далее добавляем файл **./src/config/colors.ts** 
+Далее этот объект будет разименован в theme.extend.colors
+```js
+export default {
+  primary: {
+    DEFAULT: "var(--color-primary)",
+    100: "var(--color-primary-100)",
+  },
+};
+```
+
+В файле tailwind.config.js добавляем следующий фрагмент
+```js
+import customColors from "./src/config/colors.ts";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: "data-theme",
+  theme: {
+    extend: {
+      colors: {
+        ...customColors,
+      },
+    },
+  }
+};
+```
+
+
+