Tailwind CSS

tailwind css логотип 2023

Введение в Tailwind CSS

Tailwind CSS - это, по сути, CSS-фреймворк для быстрого создания пользовательских интерфейсов. Это высоконастраиваемый низкоуровневый CSS-фреймворк, который предоставляет вам все необходимые строительные блоки для создания индивидуального дизайна без раздражающих стилей, за отмену которых приходится бороться. Прелесть этой штуки под названием tailwind в том, что она не навязывает спецификацию дизайна или то, как должен выглядеть ваш сайт, вы просто собираете вместе крошечные компоненты, чтобы создать уникальный пользовательский интерфейс. Tailwind просто берет "сырой" файл CSS, обрабатывает этот файл CSS через файл конфигурации и выдает результат. Почему именно Tailwind CSS ?

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

Преимущества Tailwind CSS

  • Больше никаких глупых имен для классов и идентификаторов CSS.
  • Минимум строк кода в файле CSS.
  • Мы можем настраивать дизайн под компоненты.
  • Делает сайт отзывчивым.
  • Внесение изменений в нужной манере.
  • CSS является глобальным по своей природе, и если внести изменения в файл, то свойство будет изменено во всех HTML-файлах, связанных с ним. Но с помощью Tailwind CSS мы можем использовать вспомогательные классы и вносить локальные изменения.

Пример

<!-- Write HTML code here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,
					initial-scale=1.0" />
		<title>Tailwind CSS</title>
		<link rel="stylesheet"
			href="./style.css" />
	</head>
	<body>
		<!-- font size -->
		<h1 class="text-lg">Large font size</h1>
		<!-- font weight -->
		<h1 class="font-bold">Bold fond weight</h1>
		<!-- Typography -->
		<h1 class="tracking-widest">Spacing between words</h1>
		<!-- Transform -->
		<h1 class="uppercase">Uppercase word</h1>
		<!-- line height align color background
			width padding margin border opacity shadow-->
		<div class="leading-9 text-right
					text-red-700
					bg-red-500 w-1/2 h-1/3 p-5 my-10
					border-t-2
					border-solid
					border-green-500
					opacity-40
					shadow-2xl">
			
<p>Text sample</p>

		</div>
		<!-- focus pseudo class -->
		<input class="border focus:border-red-500
					focus:outline-none p-5 m-5
					placeholder-red-500"
			type="text"
			name=""
			value=""
			placeholder="name" />
		<!-- layout -->
		<div class="md:flex md:flex-wrap m-5">
			<div class="bg-blue-500
						p-5 md:w-1/3
						md:bg-pink-600">
			GeeksforGeeks
		</div>
			<div class="bg-teal-500 p-5 md:w-1/3">
			GeeksforGeeks
		</div>
			<div class="bg-yellow-500 p-5 md:w-1/3">
			GeeksforGeeks
		</div>
		</div>
	</body>
</html>

Источники