Tailwind - Revision history

Lsokolowski1: /* Responsive */

2026-03-16T10:17:02Z

Responsive

← Older revision		Revision as of 10:17, 16 March 2026
Line 255:		Line 255:
	* '''2xl:''' ≥ ''1536px''		* '''2xl:''' ≥ ''1536px''

	=== ~~'''~~How They Work~~'''~~ ===		=== How They Work ===
	* '''Unprefixed''' classes (e.g., ''text-left'') apply to all screen sizes		* '''Unprefixed''' classes (e.g., ''text-left'') apply to all screen sizes
	* '''Prefixed''' classes (e.g., ''md:text-center'') apply at that breakpoint and above		* '''Prefixed''' classes (e.g., ''md:text-center'') apply at that breakpoint and above
Line 263:		Line 263:
	</syntaxhighlight>		</syntaxhighlight>

	=== ~~'''~~Key Notes~~'''~~ ===		=== Key Notes ===
	Tailwind uses mobile-first logic - utilities by default work for mobile phones(!)		Tailwind uses mobile-first logic - utilities by default work for mobile phones(!)
	* styles for '''smaller''' screens cascade '''upward'''		* styles for '''smaller''' screens cascade '''upward'''

2026-03-11T11:47:25Z

Exercises

← Older revision		Revision as of 11:47, 11 March 2026
Line 335:		Line 335:
	# ./tailwindcss-windows-x64.exe --cwd [path_to]/antyptcss -i input.css -o output.css --watch		# ./tailwindcss-windows-x64.exe --cwd [path_to]/antyptcss -i input.css -o output.css --watch
	# ./tailwindcss-linux-x64 --cwd ./antyptcss -i input.css -o output.css --watch		# ./tailwindcss-linux-x64 --cwd ./antyptcss -i input.css -o output.css --watch
			# ./tailwindcss-linux-x64 -i input.css -o output.css --watch
	#		#
	# 2. npx serve -d -C		# 2. npx serve -d -C

2026-03-11T11:34:36Z

Exercises

← Older revision		Revision as of 11:34, 11 March 2026
Line 334:		Line 334:
	# 1.1. execution example		# 1.1. execution example
	# ./tailwindcss-windows-x64.exe --cwd [path_to]/antyptcss -i input.css -o output.css --watch		# ./tailwindcss-windows-x64.exe --cwd [path_to]/antyptcss -i input.css -o output.css --watch
			# ./tailwindcss-linux-x64 --cwd ./antyptcss -i input.css -o output.css --watch
	#		#
	# 2. npx serve -d -C		# 2. npx serve -d -C

2026-03-11T08:09:42Z

2026-03-11T07:59:40Z

Exercises

← Older revision		Revision as of 07:59, 11 March 2026
Line 319:		Line 319:
	Some of the exercises (''antyporn'' website)		Some of the exercises (''antyporn'' website)

			<br />
	Collapsed by default		Collapsed by default
	<div class="mw-collapsible mw-collapsed">		<div class="mw-collapsible mw-collapsed">

2026-03-11T07:59:25Z

Exercises

← Older revision		Revision as of 07:59, 11 March 2026
Line 317:		Line 317:
	-->		-->
	== Exercises ==		== Exercises ==
	Some of the exercises		Some of the exercises (''antyporn'' website)

	Collapsed by default		Collapsed by default

2026-03-11T07:58:50Z

Exercises

← Older revision		Revision as of 07:58, 11 March 2026
Line 317:		Line 317:
	-->		-->
	== Exercises ==		== Exercises ==
	~~TODO: update it with~~ the ~~final version from 'antyptcss'~~		Some of the exercises

	Collapsed by default		Collapsed by default

2026-03-11T07:43:34Z

← Older revision		Revision as of 07:43, 11 March 2026
Line 288:		Line 288:

	== CSS variables (theme) ==		== CSS variables (theme) ==
	~~TODO - put some short descr here~~		Using '''utility classes as an API''' for our '''design tokens'''
			* for building '''custom designs''' with different typography, colors, shadows, breakpoints, etc
			* in Tailwind projects we store those values in '''theme variables'''

			'''Theme variable'''
			* '''special''' CSS variables
			* defined with '''@theme''' directive
			** influence which utility classes exist in our project

	'''Example'''		'''Example'''

2026-03-11T07:31:53Z

← Older revision		Revision as of 07:31, 11 March 2026
Line 271:		Line 271:
	* or use the ''--breakpoint-*'' '''theme''' variables		* or use the ''--breakpoint-*'' '''theme''' variables

	== CSS grid layout ==		== CSS flex/grid layout ==
	Using grid utilities directly in our HTML		Using flex/grid utilities directly in our HTML
	* it's so much easier to reason about complex layouts		* it's so much easier to reason about complex layouts

	'''Example'''		'''Example'''
	~~TODO~~ - ~~put some short example here~~		<syntaxhighlight lang="css">
			<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
			<div class="bg-blue-200 p-4">Item 1</div>
			<div class="bg-blue-200 p-4">Item 2</div>
			<div class="bg-blue-200 p-4">Item 3</div>
			<div class="bg-blue-200 p-4">Item 4</div>
			<div class="bg-blue-200 p-4">Item 5</div>
			<div class="bg-blue-200 p-4">Item 6</div>
			</div>
			</syntaxhighlight>

	== CSS variables (theme) ==		== CSS variables (theme) ==

2026-03-11T07:25:31Z

← Older revision		Revision as of 07:25, 11 March 2026
Line 239:		Line 239:

	== Alien Magic! (3D transforms) ==		== Alien Magic! (3D transforms) ==
	~~TODO~~		'''Rotate, scale, skew''' - you name it!
			* ''skew-x-12, skew-y-12'' - on both axes

	== Responsive ==		== Responsive ==
Line 271:		Line 272:

	== CSS grid layout ==		== CSS grid layout ==
	~~TODO - put some short descr here~~		Using grid utilities directly in our HTML
			* it's so much easier to reason about complex layouts

	'''Example'''		'''Example'''