1

Tailwind 4
vs
CSS 6

Lukáš Trumm
Software Context engineer
FrontCon 25

Ahoj, já jsem Lukáš Trumm, a mám tu čest začít na této stagi vcelku ostrým tématem. Tailwind 4 vs CSS 6!

2

Myslím, že jsem nenapsal ani jednu řádku frontendového kódu v posledních 3 měsících.

Autor Base44 - platformy prodané za 80 mil. dolarů

Pokud je vaším cílem zaujmout investory do AI technologií, můžete jít klidně domů... ale možná jste tu proto, že vás frontend technologie baví, tak pojďme na to!

3
🙋🏻

Vyberte si teď nějaký projekt na kterém jste poslední dobou hlavně pracovali. Ideláně v týmu a ideálně nějaký, kde bylo potřeba stylovat a nebylo vše zajištěno nějakou hotovou knihovnou komponent.

Zvedněte prosím ruku, jestli to byl projekt, kde se používá Tailwind. A nyní nechte nahoře ruku ti, kteří jsou spokojení s tím jak je nebo byl na tom projektu Tailwind používán.

Fajn a teď ruce dolů, a teď zvendne ruku ten, kdo pracoval na projektu, kde bylo hlavně čisté CSS nebo nějaký vlastní CSS framework. Ok a zase nechají nahoře ruku ti, kteří jsou spokojení s tím jak je nebo bylo na tom projektu CSS používáno.

4

CSS se stále zlepšuje
– využijme toho!

  • Ještě pro kontext - odkud přicházím k tomuto tématu?
  • Minulý jsem mluvil na meetupu frontendistů o tom, že CSS se stále zlepšuje.
  • Zkoumal jsem, zda jde postavit design systém jen pomocí čistého, moderního CSS.
  • A ano jde to!
5

Moderní CSS 6

No notes for this slide

6

CSS 6

Kaskáda a specifičnost
Kaskáda a specifičnost
Kaskáda a specifičnost
Kaskáda a specifičnost
@layer theme {
  @media (prefers-color-scheme: dark) {
    html:not(.is-light) {
      --text-color: blue;
    }
  }
}

/* custom text color */
html {
  --text-color: red;
}
:where()
Cascade layers
4
0
1
2
3
4

Co je to teda CSS 6: CSS má fůru nových vlastností. Rozhodně víc, než kolik se vejde do jedné přednášky, nicméně vypíchnu tady pár, které mají nějaký specifický vliv na naše srovnání, v dalších přednáškách se můžete těšit na další.

7

CSS 6

Scoping

@scope (.card) {
  :scope {
    background-color: plum;
  }

  a {
    text-decoration: none;
  }
}

 

Nadpis karty

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link →
Normální text upozorňující na link.
@scope

Dekorace odkazu je nastylovaná pouze v mé komponentě. Všimněte si, že není nutné pojmenovávat žádnou CSS třídu, protože styly jsou omezené na mojí komponentu.

8

CSS 6

<nav>
  <ul class="submenu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    ...
  </ul>
</nav>
/* 7+ items */
.submenu:has(li:nth-child(n + 7)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
has
1
0
1

HAS je takové nenápadné klíčové slovo, je trochu schované támhle v tom druhém bloku kódu. HAS: pomůže se vyhnout javascriptu, vyřeší problém elegantně Co tento kód dělá? Pokud má submenu více než 7 prvků, tak jej zobrazí ve dvou sloupcích.

9

Tailwind 4

v3.4v4.0Improvement
Full build378ms100ms3.78x
Incremental rebuild with new CSS44ms5ms8.8x

No notes for this slide

10

Tailwind 4

v3

.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

v4

@layer theme {
  :root {
    --spacing: 0.25rem;
  }
}

@layer utilities {
  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }
}

No notes for this slide

11

Tailwind 4

Tailwind config

CSS 6

Custom framework

:root {
  /* 4.5px => 5.0px */
  --space-1: clamp(0.281rem, 0.27rem + 0.05vw, 0.313rem);
  /* 9.0px => 10.0px */
  --space-2: clamp(0.563rem, 0.54rem + 0.11vw, 0.625rem);
  /* 13.5px => 15.0px */
  --space-3: clamp(0.844rem, 0.81rem + 0.16vw, 0.938rem);
  /* 18.0px => 20.0px */
  --space-4: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  /* 27.0px => 30.0px */
  --space-5: clamp(1.688rem, 1.62rem + 0.33vw, 1.875rem);
}
1
0
1

No notes for this slide

12

Co má smysl porovnávat?

obyčejné CSS Knihovna komponent, která snědla moudrost světa (Material UI) Tailwind CSS abstrakce Bootstrap
1
0
1

No notes for this slide

13

Custom CSS framework

  • scoping stylů 
    @scope / <style scoped>
  • vrstvení stylů 
    @layer
  • škály pro typografii, mezery, velikosti, barvy 
    Open Props
  • sady hodnot pro stíny, okraje, radiusy atp. 
    Open Props
  • pomocné třídy 
    Every Layout
  • možná grid systém

No notes for this slide

14

Problémy a řešení

No notes for this slide

15

Scoping

<div class="rounded-3xl bg-white p-10 shadow-2xl ring-1 ring-gray-900/10">
  <h2 class="text-base/7 font-semibold text-indigo-600">Card title</h3>
  ...
</div>
<div
  class="rounded-3xl bg-white p-10
  shadow-2xl ring-1 ring-gray-900/10"
>
  <h2
    class="text-base/7 font-semibold
    text-indigo-600"
  >
    Card title
  </h3>
  ...
</div>
<template>
  <div class="card">
    <h2 class="title">Card title</h2>
    ...
</template>

<style scoped>
.card {
  ...
}

.title {
  ...
}
</style>
1
0
1

No notes for this slide

16

Naming is hard

<div
  class="rounded-3xl bg-white p-10
  shadow-2xl ring-1 ring-gray-900/10"
>
  <h2
    class="text-base/7 font-semibold
    text-indigo-600"
  >
    Card title
  </h3>
  ...
</div>
<template>
  <div class="card">
    <h2 class="title">Card title</h2>
    ...
</template>

<style scoped>
.card {
  ...
}

.title {
  ...
}
</style>

No notes for this slide

17

No notes for this slide

18

Konzistence - CSS

:root {
  --text-color-1: var(--gray-1);
  --text-color-2: var(--gray-4);

  --positive-color: var(--green-6);
  --negative-color: var(--red-6);

  --brand-color: var(--blue-7);
  --link-color: var(--brand-color);

  --font-size-0: 1rem;
  --font-size-1: 1.25rem;
  --font-size-2: 1.5rem;
  ...
}
.heading-1 {
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-headings);
}

.heading-2 {
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-headings);
}

No notes for this slide

19

Konzistence - Tailwind

<div class="
    rounded-md
    px-4
    bg-gray-200
    max-w-[200px]
  "
>
  <h2>My card component</h2>
</div>
@theme {
  --radius: var(--radius-md);
  --spacing: 0.4rem;
  --color-surface-1:
      var(--color-slate-200);
}
4
0
1
2
3
4

No notes for this slide

20

Konzistence - Tailwind

HTML

<div class="p-101">...</div>

Vygenerované CSS

.p-101 {
  padding: calc(var(--spacing) * 101);
}

No notes for this slide

21

Rychlý vývoj

Tailwind je rychlý pokud

  • znáte všechny potřebné třídy a syntax

No notes for this slide

22

Adam Wathan (video)

No notes for this slide

23

No notes for this slide

24

Rychlý vývoj

Tailwind je rychlý pokud

  • znáte všechny potřebné třídy a syntax
  • používáme AI nástroj bez dalšího kontextu
1
0
1

No notes for this slide

25

AI — prompt

  Add CSS styling to the provided HTML using Custom CSS framework.

  <requirements>
  - Create semantic CSS classes and apply them to HTML elements
  - ONLY use existing CSS custom properties from the Custom CSS framework
  </requirements>

  <context>
  Whole Custom CSS framework:
  [the source code ~10k tokens]
  </context>

  <examples>
  ...
  </examples>

No notes for this slide

26
research.md

Custom CSS: Rejected due
to development time constraints

— Claude Code

No notes for this slide

27

Filozofie

Definujte výchozí hodnoty, které nejsou užitečné
bez dalšího stylování

  • stylovat je třeba vše od začátku

Tailwind

Definujte výchozí hodnoty, které jsou užitečné
bez dalšího stylování

  • další styly přidávají detaily a výjimky

Custom CSS framework

2
0
1
2

No notes for this slide

28

Personal

$29/month

The perfect plan if you're just getting started with our product.

  • ✓ Unlimited projects with real-time collaboration
  • ✓ Advanced analytics and detailed reporting
  • ✓ Seamless integrations with popular tools
Get started today

Porovnání zdrojáků 1 Pojme na srovnání na jedné vcelku jednoduché komponentě - předplatné SAAS služby

29
<div
	class="rounded-3xl bg-white p-10 shadow-2xl ring-1 ring-gray-900/10"
>
	<h3 class="text-base/7 font-semibold text-indigo-600">Personal</h3>
	<p class="mt-4 flex items-baseline gap-x-2">
		<span class="text-5xl font-semibold tracking-tight text-gray-900"
			>$29</span
		>
		<span class="text-base text-gray-500">/month</span>
	</p>
	<p class="mt-6 text-base/7 text-gray-600">
		The perfect plan if you're just getting started with our product.
	</p>
	<ul class="mt-8 space-y-3 text-sm/6 text-gray-600">
		<li class="flex items-start gap-x-3">
			<span class="flex text-lg text-indigo-600">✓</span>
			Unlimited projects with real-time collaboration
		</li>
		<li class="flex items-start gap-x-3">
			<span class="text-lg text-indigo-600">✓</span>
			Advanced analytics and detailed reporting
		</li>
		<li class="flex items-start gap-x-3">
			<span class="text-lg text-indigo-600">✓</span>
			Seamless integrations with popular tools
		</li>
	</ul>
	<a
		href="#"
		class="border-b-none border-none! mt-10 block rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
		>Get started today</a
	>
</div>

Porovnání zdrojáků 2

30
<div class="card u-flow">
	<h3 class="title u-subheading">Personal</h3>
	<p class="pricing">
		<span class="amount">$29</span>
		<span class="period">/month</span>
	</p>
	<p class="description">
		The perfect plan if you're just getting started with our product.
	</p>
	<ul class="features">
		<li class="feature">
			<span class="icon">✓</span>
			Unlimited projects with real-time collaboration
		</li>
		<li class="feature">
			<span class="icon">✓</span>
			Advanced analytics and detailed reporting
		</li>
		<li class="feature">
			<span class="icon">✓</span>
			Seamless integrations with popular tools
		</li>
	</ul>
	<a href="#" class="p-button">Get started today</a>
</div>

Porovnání zdrojáků 3

31
<style scoped>
.title {
  --flow-space: var(--space-2);
  line-height: var(--font-lineheight-4);
}

.pricing {
  --flow-space: var(--space-1);
}

.amount {
  font-size: var(--font-size-5);
  font-weight: var(--font-weight-5);
  letter-spacing: -0.025em;
  color: var(--text-color-1);
}

.description {
  margin-top: var(--space-3);
  line-height: var(--font-lineheight-4);
}

.features {
  margin-top: var(--space-5);
  --stack-space: var(--space-2);
  font-size: var(--font-size--1);
  line-height: var(--font-lineheight-3);
}

.feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon {
  font-size: var(--font-size-1);
  color: var(--blue-8);
}

.p-button {
  margin-top: var(--space-6);
  display: block;
  background-color: var(--blue-8);
  color: var(--text-color-1-inverse);

  &:hover {
    background-color: var(--blue-7);
  }
}

.card {
  padding: var(--space-6);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  border: var(--border-default);
  color: var(--text-color-2);
  background-color: var(--surface-1);
}

</styles>

Porovnání zdrojáků 4

32

Závěry

někdo mi dal knihovnu komponent postavenou na TW nevadí mi hromada tříd systém v TW mi sedí e-shop line of business app website poběží to i za 10 let hodí se mi nemít build step white label produkty CSS Tailwind

No notes for this slide

33

No notes for this slide

34

Díky!

Lukáš Trumm

→ https://bsky.app/profile/lukastrumm.com

→ https://lukastrumm.com/talks

→ https://github.com/lttr/puleo

Powered bySlidev logo

No notes for this slide

34 slides · 48 clicks · 0 words