Использование TailwindCSS в SvelteKit для создания системы дизайна : Часть вторая

Читайте, если:

  1. Вы ознакомились с первой частью

Я бы сказал, пожалуйста, прочитайте первую часть, если вы еще не прочитали, это продолжение.

Введение
В прошлой части мы узнали, что такое система проектирования, tailwindcss, sveltekit. Мы также создали проект, в котором добавили tailwind css в sveltekit. Это то, что мы сделали в прошлой части. В этой части мы внесем изменения в наш файл tailwind.config.cjs для определения цветов, размеров экрана, интервалов и многого другого.

Знакомство с конфигурациями tailwind
Здесь мы будем редактировать файл конфигурации tailwind. Tailwind предоставляет конфигурацию на уровне системы.

  • Сначала я объясню, что мы можем делать с помощью файла config.
  1. content : Это объект типа массива, в котором мы передаем файл, который будет обработан компилятором tailwind для добавления tailwind css в ваш проект.

  2. theme : Это объект словарного типа, где вы определяете цветовую палитру, шрифты, масштаб шрифтов, размеры границ, точки разрыва — все, что связано с визуальным оформлением вашего сайта.

  3. plugins : Это объект типа array, он позволяет регистрировать плагины в Tailwind, которые могут быть использованы для создания дополнительных утилит, компонентов, базовых стилей или пользовательских вариантов.

  4. corePlugins : Это объект типа словаря, где вы полностью отключаете классы, которые Tailwind обычно генерирует по умолчанию, если они не нужны для вашего проекта.

По моему мнению, это основные параметры, с которыми вам нужно играть в основном в конфигурационном файле. Если вы хотите узнать больше о конфигурации, нажмите здесь.

Настройка конфигурации tailwind
В нашем проекте я собираюсь сосредоточиться на разделе theme, который является наиболее важным для системы проектирования.

  • В разделе theme у вас есть две опции.
  1. Расширить стандартную конфигурацию tailwind css: Это означает, что вы можете добавить свои свойства, и у вас также могут быть свойства tailwind.
theme: {
    extend: {
        colors: {
            'additional-color-name':'value',
        }
    }
Войти в полноэкранный режим Выйти из полноэкранного режима
  1. Заменить значение по умолчанию: Это означает, что у вас есть все элементы управления всеми свойствами. Tailwind по умолчанию будет заменен вашими значениями.
theme: {
    colors: {
        'color':'value',
    }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Это заменит цвета по умолчанию.
Если вы хотите узнать больше о конфигурации темы tailwind, нажмите здесь

  • Нам нужна наша система оформления, поэтому мы заменим цвета по умолчанию на наши значения. Здесь я использую свои собственные цвета.

Поэтому я добавлю эту конфигурацию в конфигурацию темы tailwind:

const colors = require('tailwindcss/colors.js');

theme: {
        colors: {
            gray: colors.gray,
            black: colors.black,
            white: colors.white,
            danger: colors.rose,
            info: colors.sky,
            warning: colors.amber,
            success: colors.teal,
            primary: colors.orange,
            secondary: colors.violet,
            tertiary: colors.rose
        }
    }
Войти в полноэкранный режим Выйти из полноэкранного режима

Здесь я решаю использовать цвета tailwind с моими собственными определенными именами или вы можете использовать генераторы оттенков tailwind и предоставить конфигурацию цветов.

Это все, что нам нужно, чтобы добавить цвета нашей системы дизайна. То же самое мы можем сделать и с экранами, и с расстояниями между ними.

Как это использовать?
В последней части, в конце у нас был такой код:

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы заметили, в прошлый раз мы не задали ему свойство цвета, но мы можем сделать это в стандартном или пользовательском варианте без каких-либо проблем.

Теперь, когда мы используем систему дизайна, мы можем сделать следующее:

<h1 class="text-3xl font-bold underline text-primary">
  Hello world!
</h1>
Войти в полноэкранный режим Выйти из полноэкранного режима

Это создаст стиль для цвета текста, который вы указали в конфигурации.

На этом мы заканчиваем эту серию статей, состоящую из двух частей.
Спасибо, что дочитали до конца.

Это я пишу для вас. Если вы хотите что-то спросить или предложить, пожалуйста, напишите это в комментариях.

Оцените статью
devanswers.ru
Добавить комментарий