TailwindCSS Extreme Composition

What is Tailwind?

What does Tailwind look like?

Vanilla CSS 

button {
	display: inline-block;
	padding: 0.5rem;
	background-color: #3b82f6;
	width: fit-content;
	height: fit-content;
	margin: 0 auto;
	font-size: 1rem;
}
Using @apply

button {
	@apply inline-block 
		   p-2
		   bg-blue-500
		   w-fit
		   h-fit
		   mx-auto
		   text-base;
}
Using classes

CSS Variants

Handling states with CSS gets verbose quickly 

button {
	/* We've seen this already */
}

button:hover {
	background-color: #2563eb;
}
button:active {
	background-color: #1d4ed8;
}

@media screen and (max-width: 1920px) {
    button {
        padding: 2rem;
    }
}

Tailwind Variants (Tailwind)

Handling states with Tailwind is simpler, and composable 

						button {
							@apply 	
									inline-block 
									bg-blue-500
									w-fit
									h-fit
									mx-auto
									text-base
									hover:bg-blue-600
									active:bg-blue-700

									p-4
									2xl:p-2 /* Note the change here */;
						}

Tailwind Configuration

Implementing your Design System 

					module.exports = {
						content: ['./src/**/*.{html,js}'], // Where to look for classes before pruning
						theme: {
						  extend: {} // Changes you want to implement
						},
					}

Tailwind Configuration

Implementing your Design System 

						module.exports = {
							content: ['./src/**/*.{html,js}'], // Where to look for classes before pruning
							theme: {
								extend: {
									screens: {
										"lg": "800px" // configure breakpoints => @media (min-width: 800px) { ... }
									}
								} // Changes you want to implement
							}
						}

Tailwind Configuration

Implementing your Design System 

						module.exports = {
							content: ['./src/**/*.{html,js}'], // Where to look for classes before pruning
							theme: {
								extend: {
									screens: {
										"lg": "800px" // configure breakpoints
									},
									colors: {
										"zencastr": "#5a85ff"
									}
								} // Changes you want to implement
							}
						}

Customizing Tailwind


						button {
							@apply 	
									inline-block 
									bg-zencastr
									w-fit
									h-fit
									mx-auto
									text-base
									hover:bg-zencastr/80
									active:bg-zencastr/60

									p-4
									lg:p-2 /* Note the change here */;
						}

Tailwind Configuration

Implementing your Design System 

						module.exports = {
							content: ['./src/**/*.{html,js}'], // Where to look for classes before pruning
							theme: {
								extend: {
									screens: {
										"lg": "800px" // configure breakpoints
									},
									colors: {
										"zencastr": {
											"50L": '#66C7FF',
											"40L": '#52B9FF',
											"30L": '#3EA8FF',
											"20L": '#2997FF',
											"10L": '#1584FF',     // e.g. bg-zencastr-10L or text-zencastr-10L
											"DEFAULT": '#006AFF', // e.g. bg-zencastr     or text-zencastr
											"10D": '#0056F0', 	  // e.g. bg-zencastr-10D or text-zencastr-10D
											"20D": '#0047E1',
											"30D": '#003AD2',
											"40D": '#002EC2',
											"50D": '#0024B3',
										}
									}
								} // Changes you want to implement
							}
						}

Customizing Tailwind


						button {
							@apply 	
									inline-block 
									bg-zencastr
									w-fit
									h-fit
									mx-auto
									text-base
									hover:bg-zencastr-10D
									active:bg-zencastr-20D

									p-4
									lg:p-2 /* Note the change here */;
						}
Tailwind Playground