You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Эта конфигурация темы Tailwind определяет порядок [каскадных слоев](#каскадные-слои) Starlight, импортирует дополнительные стили Tailwind от Starlight, а также стили темы и утилиты Tailwind.
186
+
Если вашему проекту требуется дополнительная конфигурация Tailwind, ознакомьтесь с разделом [Использование нескольких конфигураций Tailwind](#использование-нескольких-конфигураций-tailwind).
187
+
185
188
4. Обновите конфигурацию Starlight, добавив файл Tailwind CSS как первый элемент массива `customCss`:
### Стилизация Starlight с использованием Tailwind
210
213
211
-
Starlight будет использовать значения из вашей [конфигурации темы Tailwind](https://tailwindcss.ru/docs/theme) в своем интерфейсе.
214
+
При [создании нового проекта Starlight с Tailwind](#создание-нового-проекта-с-tailwind) или при [добавлении Tailwind в существующий проект Starlight](#добавление-tailwind-в-существующий-проект), Starlight будет использовать значения из вашей [конфигурации темы Tailwind](https://tailwindcss.com/docs/theme), расположенной в файле `src/styles/global.css`, для стилизации своего пользовательского интерфейса.
212
215
213
216
Если установлены, следующие пользовательские свойства CSS переопределят стили Starlight по умолчанию:
214
217
@@ -226,11 +229,11 @@ Starlight будет использовать значения из вашей [
/*Ваш предпочтительный шрифт для текста. По умолчанию Starlight использует системный стек шрифтов. */
232
+
/*Предпочитаемый шрифт для текста. По умолчанию Starlight использует системный стек шрифтов. */
230
233
--font-sans: 'Atkinson Hyperlegible';
231
-
/*Ваш предпочтительный шрифт для кода. По умолчанию Starlight использует системные моноширинные шрифты. */
234
+
/*Предпочитаемый шрифт для кода. По умолчанию Starlight использует системные моноширинные шрифты. */
232
235
--font-mono: 'IBM Plex Mono';
233
-
/*Ваш предпочтительный акцентный цвет. Indigo наиболее близок к цветам по умолчанию в Starlight. */
236
+
/*Предпочитаемый акцентный цвет. Indigo наиболее близок к цветам по умолчанию в Starlight. */
234
237
--color-accent-50: var(--color-indigo-50);
235
238
--color-accent-100: var(--color-indigo-100);
236
239
--color-accent-200: var(--color-indigo-200);
@@ -242,7 +245,7 @@ Starlight будет использовать значения из вашей [
242
245
--color-accent-800: var(--color-indigo-800);
243
246
--color-accent-900: var(--color-indigo-900);
244
247
--color-accent-950: var(--color-indigo-950);
245
-
/*Ваша предпочтительная серая палитра. Zinc наиболее близок к значениям по умолчанию в Starlight. */
248
+
/*Предпочитаемая серая палитра. Zinc наиболее близок к значениям по умолчанию в Starlight. */
246
249
--color-gray-50: var(--color-zinc-50);
247
250
--color-gray-100: var(--color-zinc-100);
248
251
--color-gray-200: var(--color-zinc-200);
@@ -257,6 +260,34 @@ Starlight будет использовать значения из вашей [
257
260
}
258
261
```
259
262
263
+
### Использование нескольких конфигураций Tailwind
264
+
265
+
Несколько конфигураций Tailwind могут быть использованы для применения различных стилей к разным частям вашего сайта, например, при [использовании Starlight с подкаталогами](/ru/manual-setup/#использование-starlight-с-подкаталогами) или при добавлении [пользовательских страниц](/ru/guides/pages/#пользовательские-страницы) на ваш сайт.
266
+
Например, вы можете захотеть использовать стили сброса Preflight от Tailwind на пользовательских страницах, сохраняя при этом слой совместимости Starlight для страниц Starlight.
267
+
268
+
Следующая конфигурация Tailwind CSS настраивает Tailwind без каких-либо плагинов или дополнительной конфигурации и может использоваться как отправная точка для страниц, не относящихся к Starlight:
/* Загрузка Tailwind без дополнительных стилей от Starlight. */
272
+
@import'tailwindcss';
273
+
```
274
+
275
+
<Steps>
276
+
277
+
1. Для страниц Starlight примените предпочитаемую конфигурацию Tailwind CSS, следуя инструкциям из раздела [Добавление Tailwind в существующий проект](#добавление-tailwind-в-существующий-проект).
278
+
279
+
2. Для других страниц примените предпочитаемую конфигурацию Tailwind CSS, импортируя её на этих страницах. Это часто делается в компоненте макета, чтобы стили Tailwind могли использоваться на всех страницах, использующих этот макет.
280
+
```astro
281
+
---
282
+
// src/layouts/CustomPageLayout.astro
283
+
import '../styles/custom-pages-tailwind.css';
284
+
---
285
+
```
286
+
287
+
</Steps>
288
+
289
+
Чтобы узнать больше о конфигурациях тем Tailwind, ознакомьтесь с [документацией Tailwind CSS](https://tailwindcss.com/docs/theme).
290
+
260
291
## Темизация
261
292
262
293
Цветовая тема Starlight может быть настроена путем переопределения её стандартных кастомных свойств.
0 commit comments