Le plus dur de l'opinion d'open source de la sustainability n'est que tous les projets sont équilibrés,
et que ce soit possible de la compétition.
Il y a beaucoup d'importants projets qui sont tellement élevés dans le stack
que les gens ne s'interfacent pas de jour en jour.
Il n'y a pas de manière obviante de produire les choses autour de eux.
Mais on est heureux parce que Tailwind est un outil où vous utilisez directement tous les jours.
Bonjour, bienvenue à la podcast de DevTools FM.
C'est un podcast des outils de développement et les gens vont les faire.
Je suis Andrew et je suis ma co-host Justin.
Bonjour tout le monde, nous sommes vraiment excitées d'être venus aujourd'hui par Adam Weitham.
Adam est le créateur de la marque TELWIN CSS.
Adam, c'est vraiment un grand plaisir de vous avoir entendu.
Andrew et moi avons été utilisés TELWIN depuis longtemps,
et c'est été très influenciant, pas seulement pour le hardware, mais aussi pour la communauté.
Nous aimerions parler de ça, mais avant de le faire,
vous voulez nous parler de votre relation avec TELWIN ?
Oui, bien sûr.
Merci pour les mots.
Je suis content que TELWIN a été un outil d'aide.
C'est génial.
Je suis Adam, je suis créé TELWIN CSS.
En 2017, c'était quand la première élection est terminée.
Un outil de développement de software aimait faire des choses.
J'ai fait TELWIN parce que j'ai besoin d'une chose pour faire des websites de style.
Ça a été arrivé par accident, vraiment.
Mais j'ai réellement été créé en 2017,
et j'ai travaillé en temps plein.
J'ai travaillé en temps plein depuis le début 2019.
Et maintenant, nous avons une petite compagnie avec un petit team de 6 personnes
qui travaillent en temps plein,
et c'est un environnement d'écosystème.
C'est ce qui me fait plaisir.
C'est génial.
C'est génial.
C'est assez successful de lancer une library d'open source.
On a maintenant 6 employés qui sont centrés.
C'est super cool.
Pour les listeners qui ne savent pas ce que TELWIN est,
je serai surpris si ils ne l'ont pas fait.
Mais qu'est-ce que TELWIN et quelles sont les bénéfices de leur approche
que ça t'aimera à votre code?
TELWIN est une frameworks CSS.
C'est en même catégorie que les outils,
comme Bootstrap, Foundation, Bulma,
ou Symante, QI.
C'est l'air où j'ai commencé à travailler.
Je ne sais pas comment beaucoup de gens sont intéressés
avec tous ces tools.
Mais c'est un tool qui t'aimera à essayer de faire un style
de websites plus vite que l'on peut faire.
Si tu es juste en train de faire un style de CSS
et un style de scratch.
La motivation pour ça est vraiment
de construire un design très custom.
Mon ami Steve,
qui est mon partenaire en TELWIN Labs,
est un design qui se démarre de tous les petits projets.
Il se met juste en train de faire un style de scratch
et je vais essayer de construire.
Avec des frameworks de CSS,
j'ai toujours été en train de faire un style de CSS
pour imprimer les designs qui ont été handés.
Mais j'ai fait le seul moyen
d'ouvrir un style de style
et de faire tout en main.
Je n'ai pas vraiment accepté
que ce soit les deux options.
Il me sentait qu'il y avait une façon
de faire un style de style un peu plus vite
que ce qui était très custom.
C'est un peu comme
le problème de TELWIN
qui est sorti pour se débarasser.
C'est un peu plus de l'abstraction
au niveau de la CSS,
les frameworks de CSS.
Il n'y a pas de bouton, des compagnons, des cartes,
des tables,
des trucs de style.
Il y a toutes ces classes
qui font que tu prends un div et dis
que tu veux être un container de flex
ou que tu veux un grid de display
ou que tu veux un underline
ou que tu veux un bold
ou que tu veux un scale de 150%.
Il y a une classe de CSS
pour tout le property de CSS.
Tu te throwes des petites classes
sur les éléments
pour faire les choses que tu veux.
Si tu veux un link bleu
qui est 20 pixels et bold avec un underline,
c'est texte XL,
texte bleu 500,
underline,
bold,
tu veux un color de couleur de hover,
hover, texte bleu 600
et maintenant c'est un peu plus noir.
Si tu veux un grand nombre
de screens, tu fais
lg, texte XL.
Et maintenant c'est un grand nombre de screens.
Chaque classe, juste comme un petit petit
et c'est un concept
de variants,
modifiés,
des classes de la première partie
qui sont conditionnellement
utilisées en cas de condition.
Tu n'as pas une classe
comme texte noir qui devient
comme gré en hover,
tu as une classe comme texte gré
qui est la seule à appeler
quand hover est active.
C'est un peu un peu un peu
d'une façon différente de la pensée
que tu penses de CSS.
Tu peux faire une classe et style
les différents états de cette classe
avec Tailwind, c'est
sort de invers.
Tu as classes qui font un truc
mais tu peux spécifier quand ça
devrait arriver.
Je ne sais pas, je pense que
je peux parler de ça pour huit heures
et c'est difficile de expliquer
les trucs visuels et les trucs en podcast
mais peut-être que c'est
suffisant d'avoir un overview
pour au moins commencer.
Oui, je pense absolument.
Je suis curieux de ce que
les techniques que tu faisais
ont l'air de
quand tu as commencé
Tailwind.
Des frameworks différents
ont un rise de différents styles
de l'approcher.
Je suis curieux de ce que
l'écosystème était en temps que tu avais
développé.
Les projets que j'ai travaillé
quand Tailwind sort de
les états
sont des projets de côté.
Je faisais des web apps
avec lairevel
comme le tool de la back-end
et j'ai utilisé un view
pour le front-end
Les front-ends étaient un mix
de les templates
avec des compétences
qui se sont montrés.
Je n'avais pas fait un
séparé API de la back-end
avec un front-end SPA
c'était un modèle monolithique
avec des compétences de view
j'ai fait un CSS avec les less
c'est le pré-processor
que j'ai toujours aimé.
Tailwind a commencé
avec des styles de less
avec des mix-ins custom
qui ont progressifement
plus compliqués
et plus difficiles
pour maintenir et tester
parce que les less
n'étaient pas vraiment
pas en train de faire les horreurs
que je faisais
et puis on a
sorti
des mêmes idées
et ont implementé
avec JavaScript
avec des CSS
c'est un tool pour faire
les manipulations de CSS
qui a été un changement
car je pouvais faire des tests
et utiliser des langues en programme
et tout.
C'est où je suis allé
le faire.
Le approach de Tailwind
s'amuse vraiment
dans les compétences
le cool chose de JSX
c'était que nous étions
sur le logic et le marque
et nous étions en un fil
et maintenant le truc dans le salle
que nous étions en train de regarder css
et il y avait un bunch de solutions
de CSS et de JS
mais dans mon avis, Tailwind est
l'ultime DX pour ajouter mes styles
dans le même fil que mon compétent.
Oui, oui, je pense que ça
s'amuse
dans cette période de compétence
de l'Ui
pour sûr.
Même quand j'ai bien commencé
Tailwind, j'ai fait beaucoup plus de classes custom
pour les choses que j'avais utilisé
donc j'ai un bouton et j'ai 10 boutons
dans le même fil.
Je ne peux pas faire un bouton
parce que
avec lairebel, c'est-à-dire
que le temps
c'est pas le normal de faire
ces types d'abstractions avec des rails
et des ERB. Les gens ne créent pas
un partage template pour quelque chose
comme petit comme un bouton. Les gens sont en train
d'avoir une BTS-class
pour les choses.
Même dans les jours plus tard,
quand j'avais fait beaucoup plus de ça
et maintenant je construis tout avec React
et c'est rarement
une situation où je veux créer
une abstraction avec CSS
parce que c'est trop cher
d'avoir un petit component
pour tout le monde.
Il peut utiliser les classes utility
et ça marche bien.
Je suis
vraiment heureux
avec l'approche
à ce jour, mais il y a un temps
où j'ai eu
une approche de CSS et JS
qui était plus meilleure.
J'ai eu beaucoup d'advantages
sur CSS et JS
sur la façon dont Tailwind
fonctionne.
Il y a beaucoup de challenges
qui s'introduisent.
Je sais qu'ils ont fait des changements
avec
StrictMode
qui ont fait ça beaucoup plus difficile
pour des solutions existantes
et un peu de choses qui ont été
débordées et abandonnées
parce que ça ne pouvait pas
travailler plus tard.
Ils ont introduit des components
pour les services et ça a fait des choses
plus compliquées pour ces tools.
Je sais qu'il y a des nouveaux
qui travaillent
maintenant, comme Facebook,
stylex, etc.
C'est bien.
La chose bonne de Tailwind
n'est pas
juste un JavaScript.
Il fonctionne sur tout.
C'est juste un style sheet
à la fin du jour.
C'est un principe important
pour continuer de construire
un template WordPress
ou un React app.
C'est bien.
C'est bien.
On ne peut pas
faire des bêtes
sur une technologie spécifique
ou se faire de l'autre.
On se fait un style sheet
juste un style sheet
pas de la faim.
C'est toujours un travail.
Des
choses qui vont arriver
et qui vont arriver
et peut-être que
quelque chose va changer
mais ça se fait
juste de se faire
focuser sur les styles sheets.
C'est bien.
Surtout avec le v3
où on commence à faire
des valeurs arbitraires
et des variants
et tout ça.
C'est très proche
d'avoir un level de power
parce que vous pouvez
créer des choses sur le fly
et ils justent.
C'est toujours
très bien pour nous ici.
C'est cool
de l'avoir
parce que je pense que
quand vous parlez de vue
il y a des components
où vous pouvez avoir
une solution en ligne.
C'est vraiment
utile si vous vous faites
une partie de vue
qui vous intéresse
et vous vous faites
focuser sur la façon dont
ce n'est pas encapsulé.
Je pense que
la vue en temps
se lève
en plus d'un plus grand
de l'UIs
et moins d'un plus grand
de composition.
Mais vous parlez
de la cross-sort de la boundary
et c'estуч Ground
mais underground.
행복
pour notre propre travail, mais c'est bien de penser à ça comme
comme près de juste penser à juste, oui, je ne sais pas le meilleur
de s'inscrire, mais j'ai essayé de penser à ça comme
pas trop distant de faire la css par hand, et des choses que
nous faisons maintenant avec les 4, c'est de faire des choses
plus sss, en quelque sorte, comme, bien sûr, c'est pas encore
très bien, il y a encore un nombre d'études de bâtiment
et complexe, les choses pour générer tous les css et faire
tout le travail, mais juste en essayant de ne pas abandonner
le file de css, vous savez, et l'extension et les choses
se sentent comme, il me semble comme le bon bâtiment.
Nous aimons remercier notre sponsor pour les
week Codecrafters.
Codecrafters fait des challenges de programmation pour
expérimenter les enjeuners de l'offre.
Si vous regardez pour un projet de côté fun qui est
très guidé et vous aide à leveler vos habilités de programmation,
vous devez les vérifier.
Il y a un peu de challenges vraiment fun, comme
construire votre gât, construire votre propre docteur,
construire votre propre bâtiment, vous pouvez même construire
votre propre SQLite.
Ils offert un host de différentes languages de programmation,
choses comme JavaScript, Go, et Rust.
Si vous me demandez, c'est beaucoup mieux que le code de
l'enjeunement de l'offre, ou en essayant de trouver un projet
d'opinion random de l'offre pour contribuer.
Vous vous en avez de la profondation dans les
laboratoires de ces tools de la population, et à la même
fois, vous êtes mieux en train de faire le
language de programmation que vous utilisez.
Vous m'avez remarqué qu'il n'y a pas de
question de dire que mon préféré de
language de programmation était soutenu.
Il n'y a pas de JavaScript.
Ça ne se passe pas, car le code de
l'offre vous donne des challenges.
En avance à un experience de l'enjeunement de l'inbrowser,
où ils contrôlent tout et c'est une expérience

Vous pouvez utiliser votre propre IDE, votre propre terminal.
Donc, est-ce que je dois les soutenir?
Non, je vais juste installer les types de nodes,
et puis je vais passer au racisme.
En fait, si vous êtes prêt à utiliser votre code avec
les crafts de code, vous pouvez juste
vous mettre sur le code, ils sont en mode de
l'enjeunement de l'inbrowser, ils ont fait les tests
et vous vous montrez les résultats.
C'est une expérience assez cool, vous m'avez demandé.
Pour essayer de faire des crafts de code pour vous-même,
visitez codecrafters.io slash devtools-fm.
Là, vous allez avoir un discount de 40%
et vous allez aussi vous aider à faire un podcast un peu.
Vous voulez sponsoriser le devtools fm?
Headez sur devtools fm slash sponsor à appeler.
Et avec ça, nous allons retourner au épisode.
Vous avez récemment v4, c'est une développement
pour un temps très long, je l'ai scané
par le change log et c'est un change log très grand.
Il y a beaucoup de choses à absorber.
Vous pouvez nous donner le niveau de ce change?
Oui, bien sûr.
Nous avons réellement réalisé la première alpha la semaine dernière.
C'est un projet où c'est
juste de la courte de la partie de notre mind
avec des prototypes et des choses à l'arrivée
pour deux ans.
Et nous avons annoncé un nouveau répôt
après la Christmas Holiday.
C'était le début de la vidéo pour le réel.
Il nous a pris deux mois pour aller de l'alpha
et de la répliquer ensemble.
Ce sont des choses de concept
que nous avons réalisées dans les dernières années.
Et nous avons solidifié ce que nous voulions faire
et nous avons fait une vision claire.
Il y a quelques petits pièces.
La première partie est que nous voulions faire
vraiment, vraiment, vraiment, vraiment vite
et vraiment bouleproof et vraiment légèrement.
Nous avons commencé avec un nouveau code base
et nous avons réévoit l'ensemble
avec des dépendances nées.
Ainsi, la première partie était très complète
pour les post-CSS.
Nous utilisons les post-CSS pour les parser les CSS,
les API pour les manipuler.
Nous utilisons les post-CSS pour les structures AST
et pour créer des nodes post-CSS
et les mettre en place.
Maintenant, nous ne faisons pas d'autre.
Nous avons écrit notre propre partage de CSS
qui ne parvient que les parts des parts de la CSS
que nous avons besoin.
Et c'est à la fois plus vite que les post-CSS
pour nos besoins, ce qui est bien.
Nous avons écrit tout notre code pour manipuler
cette CSS, nous avons créé nos mêmes structures
basées sur les choses que nous devons faire
où nous pouvons faire des médailles
des télés spécifiques, des choses comme ça.
Nous avons vraiment refusé de modéliser
le problème, vraiment bien.
Ce serait difficile de faire en code.
Il y a beaucoup de features que Taelin n'a pas originalement.
Vous avez mis des features en temps
et en tant que hard to try,
vous avez le temps de se battre.
C'est difficile de faire tout en rafraîchant
et de réstructurer le corps.
C'est ce que nous avons fait
ce temps-ci.
Nous avons essayé de faire toutes les abstractures
basées sur tout ce que nous avons appris
avec l'еспonducteur et d'é頻.
Nous allons aussi
IONIR Tiger Kick Cityиб,
Moir Ball for Beta and

Jeimie Grop Towns de PO Incorrect ∞
pour les autres,
On a vraiment, vraiment, expliqué des chansons.
Donc, la main chose que nous faisons dans Rust, Intel, et 4,
c'est tout le travail pour voir un file JSX et trouver les tokens dans ça,
ce qui pourrait être des noms classiques.
Donc, dans JavaScript, nous avons dû faire ça avec des expressions régulaires.
C'est la seule chose.
Dans JavaScript, c'est rapide quand ça vient de faire ça,
mais c'est un nightmare et vraiment difficile à maintenir.
En Rust, nous pouvons faire un parcerage de byte,
pour que nous puissions l'interpréter sur chaque byte dans le file,
avec un machine de state que nous avons manqué.
C'est comme, on a vu un quote,
ce qui pourrait être le début d'une nouvelle classe.
Oh, il y avait un espace, c'est le final de la classe.
Nous avons pu construire tout ce qui se passe avec toutes ces règles en mémoire.
C'est vraiment facile de suivre et de maintenir,
et d'améliorer très vite, parce que c'est un code native.
Et la autre chose, c'est que ce type de travail est très parallélisé,
et la note est single-thread,
et on peut seulement faire des trucs dans un single-thread,
mais dans Rust, nous pouvons utiliser tous les cours sur votre machine.
Donc, la façon dont ça fonctionne maintenant,
c'est que le part de Rust est ce qui regarde votre projet,
et qui essaie de trouver tous les files qui peuvent avoir des classes dans les files.
Et ensuite, nous avons pu mettre tous ces classes
dans un pool de thread,
ou tous ces files dans un pool de thread,
qui distribue le travail sur votre machine de la maison,
et chaque file peut maintenant être parvenu
dans un separate travail,
sur un separate thread.
C'est évidemment pas chaque file dans un separate thread,
mais ça va expliquer les files comme possible.
Donc, si vous avez 8 cours sur votre machine,
c'est théoriquement d'être 8 fois plus vite que ça,
que si vous avez fait un single-thread,
et un autre ordre de magnitude plus vite,
parce que c'est écrit en code native,
en plus d'un JavaScript.
C'est comme si c'était juste une pièce de pièce,
juste de base,
des trucs computers,
juste de la faible texte.
Vous savez ce que ça veut dire ?
C'est un truc qui peut être un peu plus vite,
et un peu plus rapide, comme ça.
C'est la seule chose que nous avons vraiment fait en Rust,
c'est d'extracter tous les noms de classes,
et puis Tailwind, en itself,
est un nier pureur,
qui a reçu un string de CSS,
qui est votre file de CSS input,
et je peux parler de pourquoi c'est important pour Tailwind 4,
mais ça a reçu un grand array
de tous les noms de classes
qui étaient trouvés dans le file.
Et puis, ça se dévise en CSS,
à l'endu de la journée.
Et tout ce que ça fait
dans ce cas, c'est de la dépendance 0,
ce qui est vraiment cool.
Alors,
le autre grand changement
est la configuration.
Historiquement,
nous avons eu ce fil de Tailwind.config.js,
un file de JavaScript,
et c'est là que vous avez découvert
votre palette de couleur,
votre faune que vous utilisez,
vous avez réagissé
les plugins de troisième part.
Historiquement, c'est aussi là
que vous avez réspecié,
comme, ok, ce sont les paths
pour tous mes files de JSX,
les revues de templates,
ou quelque chose.
Alors, Tailwind
sait où il faut regarder
pour regarder les noms de classes.
Et dans le v4,
nous avons eu cette idée
d'une idée assez bolde
de tenter de faire
tout ça
dans un file de CSS
plutôt que dans un file de JavaScript.
Parce que,
historiquement,
vous avez dû avoir un file de CSS
et un file de JavaScript
dans Tailwind.
Vous avez un file de JavaScript
qui a tous vos couleurs
et tout comme ça.
Et puis,
vous avez un file de CSS
où vous avez votre base de Tailwind,
votre components de Tailwind,
votre utilité de Tailwind,
plus d'autres trucs
que vous voulez mettre dans le file.
Et on a souvent des questions
des gens qui vont demander
des choses comme,
comment j'ai ajouté
un fonds custom
dans Tailwind,
où est le spot
dans le file de config
pour ajouter un fonds custom?
Et c'est une question
raisonnable
parce qu'il me semble
que c'est votre file de configuration,
mais le correct
answer est que vous ne l'avez pas.
Vous faites ça dans votre file de CSS.
Il y a un fonds de face
qui est la façon de définir
les fonds custom.
Mais je pense que
pour les gens,
cette sorte de chose a senti
quelque chose d'inquiétant.
C'est comme,
pour quelque chose d'intuit,
vous devez garder
tout en ce file de configuration
centralisé.
Mais ce n'est pas
ce que nous utilisons
Tailwind.
Mais je comprends
comment le système
que nous avons designé
sort de
ce message.
Et la même chose
pour les questions,
comment j'ai changé
le fonds default
sur l'element de HTML?
Je serai open
de CSS,
et j'aurais lu
l'espace de HTML,
l'air de base,
fonds de famille,
ou tout.
Mais les gens pensent
qu'ils font quelque chose
d'inquiétant
quand ils font ça.
Et puis,
même le plus mal,
c'est que si vous voulez
faire
si vous avez besoin
de faire des propriétés customes,
parce que vous voulez
faire votre site
comme éthémable
ou quelque chose,
vous définissez
tous ces couleurs
dans le file de CSS.
Et puis,
mais ensuite, vous définissez
comme
le palette de couleur
qui les consomme
dans votre file de JavaScript.
Et ça se sent
aussi bien,
parce que vous avez des choses
comme expliqué.
Et puis,
parce que nous voulions
faire beaucoup de tailwind
et de russes,
et nous n'avions pas
fait ça.
Comme je l'ai dit,
la seule chose que nous avons fait
était de passer le file de template.
Tout ce qui s'est passé
encore dans le JavaScript.
Mais ça a semblé
comme intéressant pour moi.
Je me sentais
comme si nous voulions
faire ça en russes,
on ne peut pas vraiment
avoir des points de extension
de JavaScript.
Maintenant,
évidemment,
on va faire
les choses
compatibles.
Donc,
nous voulions
faire ça
de toute façon.
Mais dans mon compte,
je pensais
que imaginez que
tailwind n'existait
avant
et nous faisons
de scratch.
Si nous voulions
faire ça en russes,
il n'y a pas de façon
qu'on peut évaluer
votre file de configuration

en russes.
Mais si nous avons
un format de configuration,
on peut,
peut-être
JSON
ou quelque chose comme ça.
Mais l'idée CSS
était vraiment
intéressant
parce qu'on peut
définir
parces de CSS
en JavaScript.
Et
vous savez,
configurer
les palettes de couleur
et tout
aussi
semble être
vraiment naturel
pour faire
dans CSS.
Nous avons déjà
déjà
des propres customes
dans CSS.
Vous savez,
chaque fois
vous ouvrez un site moderne
et vous regardez des tools de dev
vous vous often
vous voyez
comme leur palette
de couleur
dans la ligne
dans la ligne
et
ça ressemble
à
ça se sent vraiment cool.
Donc,
oui,
donc,
on pensait,
vous savez,
on va voir
comment
cette configuration
nous pouvons faire
dans CSS.
Parce que
si nous pouvons
avoir des gens
qui ont
leur palette de couleur
qui sont
spécifiquement
qui font
ce qu'ils veulent
utiliser
pour des choses différentes,
puis,
mettre les
règles de faute
ou les règles de faute
à l'arrivée
à ce que ce déclaration
va se sentir
très naturel.
Ce n'est pas
pas un peu
comme ils font
quelque chose d'accord.
Donc,
ça a terminé
en étant
comme la autre
grande chose
que nous
avons fait
pour le T1 4.
C'est que
la version alpha
ne supporte pas
la configuration de JavaScript.
Nous allons
faire ceci
avant de faire
une réplique stable
pour la compétition de base.
Mais maintenant,
la seule façon
de la configurer
est dans CSS.

en avant de
avoir la base
la components
la utilité,
vous faites
comme
la importe
sur CSS,
c'est un autre
moyen
que nous voulons
faire
plus
comme des syntaxes customes
et tenter
de utiliser
autant de choses

comme possible.
C'est seulement possible
maintenant
parce que
si
vous avez des features
modernes
qui nous
pouvons aussi
parler
mais vous importez
sur CSS
sur le fil de votre file.
Donc,
ça juste
semble
comme
importe
un framework
qui ne semble
pas
comme
vous configurer
quelque chose.
Et puis vous avez
ce
chose
qui s'appelle
comme une
rule de
atthème.
Donc,
ceci est custom
mais je n'ai pas vu
d'autre façon
de le faire.
Et dans ce
atthème
qui est
comme un
à la
media
ou à la
faune
ou
ou quoi
vous definez
un peu de propres customes
comme
dash dash
color dash
red dash
100
et puis vous spécifiez
le code
red 200
spécifiez
le code
vous spécifiez
votre palette de couleur
vous spécifiez
ce que vous utilisez
vous pouvez spécifier
votre scale de spécifiant
vous pouvez spécifier
votre
transition
de la fonction
et de votre
sort de
des tokens
vous savez
ce sort
de
comme
des parts
de
un projet
je vais
trouver
là
et puis
la fin
passe
ce que
et
utilise
tous ces valeurs
internellement
pour décider
comme
ce que
les classes
sont disponibles
comme
les classes
de configuration
de la

red
100
signifie
qu'il y a un texte
de la classe
de la classe
de la classe
de la classe
de la classe
de la classe
de la classe
de la classe
donc
c'est
le plus
grand change
conceptuellement
donc nous avons fait
un grand ré-write
nous avons fait
vraiment vite
et nous
avons essayé
de simplifier
l'expérience de la développe
en avant un file

où vous faites
un peu de choses
et un file de CSS
où vous faites
un peu de choses
c'est juste
un file de CSS
et
je pense que ça va
ouvrir
beaucoup
d'opportunités
pour nous
pour simplifier
d'autres choses
dans le futur
et je pense
que le plus grand
chose
qui n'a pas vraiment
nécessité de ré-write
mais je pense que c'est
une bonne
motivation
pour en parler
comme un V4
c'est vraiment
tenter de l'embrasser
des features de CSS
modernes
qui n'existent
quand la première
partie
est sortie
donc un exemple
c'est des laitres de CSS
donc la laitre
a toujours été
pas toujours
mais pour un long temps
c'est à la laitre
d'utiliser
des components à la laitre
pour mettre en custom CSS
et faire surement
qu'ils vont dans le bon
sort de spot
dans votre file de CSS
on a en fait
ajouté ça
avant
que c'était partie
de CSS
et je n'ai même pas
même pas
que c'était
quelque chose
qui était en CSS
et puis ils ont ajouté
dans CSS
et maintenant
on a un
custom custom
avec CSS
mais c'est en fait
bon
parce que la
css
est plus
plus
powerful
mais ça
fait le même
sort de chose
vous sort de
ça
laissez vous créer
ces sortes de
buckets
où vous pouvez mettre
des styles
et vous n'avez pas
à ne pas

faire
votre CSS
dans le bon
sort
parce que
css
historiquement
c'est comme
la dernière
de la laitre
sort de
les points
comme ça
a la même spécificité
que la
comparaison
mais avec les laitres
vous pouvez dire
ok
j'ai un base
laitre
j'ai un layer

j'ai un layer
d'utiliser
et à la fin de la file
je peux
ajouter
quelque chose
à la base
je n'ai pas
de
aller au-dessus
de la file
pour faire
ceci
c'est
vraiment
bien
si vous avez
plusieurs files
pour
une raison
dans un projet
mais c'est aussi
bien
parce que
maintenant
on n'a pas
de concept
de laitre
comme
un
en
on
on
on
on
on
on
on
on

on
on
on
on
on
on
on
on
on
on
on
on
on
on



on





non
on
on



on
on
on
On peut changer l'opacity de la couleur de l'on ne peut pas l'enlever à un RGB.
Mais la mix de couleur peut prendre l'opacity de la couleur de l'on et l'envergée de l'on.
Il peut prendre comme un argument de CSS variable et l'envergée de l'opacity de l'on.
Ça simplifie beaucoup de choses que nous avons à faire et ça fait que les choses sont plus puissantes.
Nous utilisons ce nouveau appartement de la propriété de CSS,
ce qui vous permet de prendre toutes les propriétés customes que vous utilisez
et d'actuellement déclare-les en haut avec le type qu'ils sont.
Et si ils l'inherent dans le casque et ce que l'initiel de valeur devrait être,
si ce n'est pas fait, ce qui est vraiment cool parce que c'est...
C'est-à-dire que les propriétés customes soient animées.
Donc, le point de vue et l'implémentation des gradients de la base,
par exemple, est que nous avons installé un variable pour l'initiel de la couleur,
un variable pour l'initiel de la couleur et un variable pour l'initiel de la couleur final.
Et nous l'avons installé dans un call de function de gradients de la couleur.
Mais parce que ce sont des variables de CSS,
le browser n'a pas d'idée de quel valeur vous en avez installé.
Si vous essayez de transition de deux gradients de la base, ce n'est pas le cas.
C'est juste un stop difficile.
Parce que ça ne sait pas que vous êtes transitionant entre deux valeurs de couleur.
Mais avec l'appartement, on peut dire que ce soit une couleur,
ce sera toujours une couleur, en tant que quoi.
Donc, quand le browser t'enlève entre les deux,
il sait comment interpréter de l'un à l'autre,
parce que ça connaît l'un des types de variable.
Donc, maintenant, en T1-4, vous pouvez avoir des gradients de background animé,
ce qui ne pouvait pas faire en T1-3 et ne pouvait pas faire en CSS,
à l'époque, jusqu'à l'apport pour ce app, des trucs.
Donc, c'est comme la grande picture,
l'overview de tout ce que nous faisons.
On voulait réécrire, faire un pasteur,
faire des choses fastes, c'est fun.
Parce que nous sommes comme...
Le code base a juste passé à un point où
ce n'était pas fun de travailler anymore,
c'est comme ça qu'on a fait cette chose crouffée,
on n'est pas vraiment prêts.
Donc, ceci, comme pour les plus ou les plus,
c'est comme mon travail de travail, à ce point.
Donc, je veux être prêts à ça.
Donc, on a réévoit, fait un pasteur,
fait la configuration de CSS,
et nous sommes tentant de l'apporter
sur un peu de ces features modernes de CSS
pour improving l'expérience.
Ce sont les 3 pièces qui ont été
tracées en ce que nous avons fait.
C'est un ton de travail, c'est vraiment cool.
D'abord, je veux demander pourquoi pas plus en Rust?
Il seemed like you wanted to write a lot of things in Rust upfront,
but ended up really subjugating it to a very specific part of the tool.
Un couple of reasons.
I think the first reason is anytime you put something into Rust,
it's really hard to make it extensible
because it gets compiled down to a binary.
You can't load a Rust plugin from a Rust package
once it's compiled.
You'll see this problem in a lot of other places.
For example, like TurboPack,
which is the new bundler that Priscilla is working on.
If there's anything that they want it to be able to do
from a plugin perspective,
they just have to compile it in and ship it to everyone.
So they want SaaS support, they compile it in.
You can't add it from userland at runtime.
I'm sure there's probably convoluted ways to do it with limitations and stuff,
but it's all very complicated and
there's a lot of constraints around it even if you can do it.
We have a very big community of tailwind plugins and stuff already.
They're all written in JavaScript.
So I don't want to unnecessarily leave all that stuff behind
if we don't have to.
Plus, we initially had this idea for...
Initially, we were just thinking about it as the JavaScript config file.
It took a long time for the CSS configuration thing
to not feel like this crazy idea.
It's funny because when we actually released the alpha,
I expected the response to be like,
this is the stupidest thing I've ever seen,
but generally, people are like,
this makes so much sense,
this feels so much more approachable,
this feels simpler, whatever,
which was nice to see.
But yeah, the extensibility
was a big part of it for sure.
Probably the biggest part, honestly.
And then I think the other element is
the tool chain and distributing things and all that stuff.
It is way more complicated in Rust than it is with JavaScript.
Just getting our GitHub actions, CI stuff right
to even compile everything, distribute everything
has been a lot of work.
Now, we've done that work at this point.
So yeah, I guess it wouldn't be that hard to add more stuff.
But the barrier to entry for Rust is a lot higher.
So getting people to contribute and stuff is harder.
And the other element is just like,
if we can make the parts that the core of it fast enough
in JavaScript, then why not?
Because it's just like, it's a lot faster to author.
And yeah, it's like insanely fast.
What we've done to this point,
the most expensive parts are in Rust already for sure.
I think there is more things we could push to it
and that's not off the table.
What's been nice has been to build the new thing with JavaScript.
And we've been very thoughtful about decoupling
different pieces of it from each other and trying to make sure
that we identify, like, oh, hey, this is a function
that does this thing, that doesn't need knowledge of everything else.
Let's carve it out to somewhere where if we wanted to port this part to Rust,
we can because it's very clear what the boundaries around it are.
So I could definitely see a future where we do do more of that.
But it's, you need to do a lot of benchmarking and stuff too
because it's very rarely intuitive what the cost of sort of bridging
between like JavaScript and Rust is.
So if you're calling like a Rust function like 5000 times,
which could happen if you're like,
entail, when the tightest loop is basically looping
over all the potential classes and finding out what the CSS is for those classes.
And in a big project, that can be like 12000 possible strings.
If you're going from node to Rust 12000 times,
like the overhead of that communication is going to be like slower
than just doing all of it in JavaScript.
And then even if you send all of it over at once and all of it back,
sometimes just like the size of like the payload that you're sharing
also like impacts the performance.
And I still do not have a good mental model around
what's going to be fast and what's going to be slow.
So it's all like trial and error and comparing things.
But yeah, right now, I think we're pretty happy with the way things are split up.
I'm sure we'll experiment with trying to push some other things to Rust,
if only for curiosity's sake.
But there's no obvious bottleneck right now,
which has been very satisfying.
Yeah, that's awesome.
I mean, I think the thing that you're talking about,
the translation cross between Rust and JavaScript,
is the same thing we've heard over and over again in the Wasm ecosystem.
It's like serialization is more costly than you might consider.
And there's ways to like, there's zero cost,
ways to share things, but like it's easy to like accidentally type one character
that throws all that away and causes it to be like serialized.
You know, and I'm not an expert, you know, I don't know a ton about it.
There's something like type to raise or something in JavaScript
and buffers I think can be shared back and forth with no cost.
But I'm curious to get a lot deeper into it because I feel like I'm blind
with this stuff still, I feel like fully trial and error
and it's not it's satisfying at all.
I hate that feeling of not like being able to predict things.
Like to me, that's like this really bad sign
that you just don't understand what you're even doing very well.
It's not satisfying for things to be trial and error.
So yeah, trying to build a better mental model of it.
But it's been an adventure for sure.
It seems like a common enough problem that will probably see
some better tools and better abstractions coming up around that area.
Even just a good blog post would be helpful.
So you mentioned lightning CSS, but it seems like you're doing
a lot of like the heavy lifting for CSS yourselves in Rust.
What part of what part of the build process are you using lightning for?
Yeah, so we explored a bunch of different ways of using it.
Originally, we were thinking, OK, lightning has plug in API's
that you can use to basically parse the CSS with lightning
and then use its API's to sort of do all your manipulation.
But we realized that that wasn't going to be the right fit for us
because we have a lot of web based stuff
that uses taewin where we need to run taewin in the browser.
So for example, we have our like taewin playground
and we also have this like CDN script
that lets you like generate taewin stuff at runtime,
which it's it's mostly it's not really meant for production,
but it's a good way for like people who aren't
comfortable with JavaScript tool chains and stuff like that
to like try taewin in just like an HTML file
that they're editing using a CDN.
It feels like a nice way to just let people play with it
and get hooked and then figure out like how to set it up for real.
But if we were going to use, if we were going to make lightning
like a hard requirement for all that stuff,
the playground would have to ship like 10 megabytes of JavaScript.
The CDN would be like an incredible amount of JavaScript
because you got to compile the Rust binary down to Wazam
and send that over the wire.
And it's just it's just really big
and we really wanted to find like a way to avoid that.
And then on top of that, we also just kind of realized
that like the things we cared about using lightning for,
we're all kind of just post-processie type steps.
So what we use it for now is we just kind of run everything
through it at the end to flatten out a bunch of nesting to
sort of transpile some super modern CSS syntax.
If people want to use like OKLCH colors or something,
that can get like compiled down to formats
that are better supported by browsers and stuff.
I think it'll compile down like custom media queries
and some other really modern stuff too.
And then just like the minification, like it's really good at minifying stuff.
But it's tricky because it totally makes sense for us to use it in like our CLI tool
when someone's using our CLI to actually spit out the final CSS file.
But if you're integrating with a tool like V to our next JS or something,
they like have CSS minification built in production steps already.
So we don't really need it for that, but it does do a better job.
The main thing is like flattening the nesting
because one of like the core architectural changes in tail and four
is we rely on CSS nesting to implement
like almost every tricky feature under the hood and how tail and works.
So like a key example is if you think about a class like hover underline,
right, that just applies an underline on hover.
The way that we actually implement that in tail and four
is we we see that class name, we see hover colon underline
and maybe it's like md colon hover colon underline.
Right. So the first thing we do is we split all the variants off
of the beginning, so we just have underline
and then we run underline through the engine to get like the CSS for that.
So now you're going to have
it's going to keep the class name that came through.
So the class name is still going to be md hover underline,
but the rules inside of it is just going to be like text separation
underline or whatever it is.
Right.
And then we take the variants and we say apply this variant to this CSS
and what each variant does,
all it does is insert like a wrapper inside of it
that wraps the contents with like another nested selector.
So hover is going to add ampersand colon hover inside.
So you've got
so it doesn't actually append hover to the end of the selector.
It just like inserts a nested rule
inside and relies on like the ampersand and CSS nesting to put it in the right spot.
And then the same thing for the media query.
OK, that's just going to dump that inside.
So you get this like deeply nested
thing where like each layer of nesting represents
one of the variants that you added to the beginning.
And in v3, we had to sort of like manipulate
the selector and do all this stuff ourselves in this really error prone
complicated way.
And in v4, it's just like, wrap it again, wrap it again, wrap it again,
wrap it again, give it to lightning, comes out flat.
You know,
so it's really like nesting has been like a core,
or a very core
feature that we just rely on for drastically simplifying things.
Same with like the add apply feature entailment,
if you're familiar with that, where,
you know, you can have like a custom class,
you can say add apply underline inside of it.
All we do for add apply is we replace each add apply with a nested rule
that just has like the ampersand and then the contents of the class
that you're applying and then pass over to lightning and nesting takes care of all of it for us.
So that was like a huge unlock,
honestly, in the simplicity of the framework was realizing how much
we could lean on CSS nesting to compose all these things together.
So that's the big thing that we use lightning for
because
the CSS is actually a lot bigger if you don't flatten the nesting.
Like nesting makes things smaller
when you have a lot of declarations inside of something.
But if when it's just one CSS property,
like what tailwind spits out without lightning
might be like six layers of nesting and then one CSS property.
You know, that would be like
two, three lines of code instead of like,
you know, 12 lines of code if you just flatten the nesting.
But the other cool thing is that for our CDN build
and for like the playground, we actually can just not use lightning
and the browser supports nesting, so it still works.
You know, so if you're using even a development build of tailwind,
because we don't run lightning on the
on the development builds and you look in dev tools,
you'll see a lot of nested stuff happening.
And then in the production builds,
the nesting gets gets flattened to make things smaller.
So that's like the biggest thing that we're we're using
lightning for right now.
Just today, actually, we removed lightning from tailwind CSS core
because we did have it in core.
That was like the only dependency.
And then we've moved it to be a dependency of our different bundler plug-ins
instead, c'est like the CLI has lightning and as a dependency.
And it uses core to generate the CSS done process with lightning.
Our Pro CSS plug-in does the same thing.
Our V plug-in does the same thing.
So, yeah, so now tailwind is truly zero dependency.
We can just like ship it in the browser really, really simply.
It's zero dependency, but no I.O.
Either is like the other hard constraint that we had to have.
If we wanted to be easy to put in the browser.
We run V3 in the browser,
but there's so much patching node modules and stuff to make sure that
FS refile sync calls don't happen and all sorts of stuff like that.
But this one has been designed from the ground up to have this
browser friendly core, which is really cool.
That's awesome.
I mean, it's really awesome to hear about the evolution of the project.
And it's also cool to hear about how you're sort of leveraging nesting and other things.
I'd had the thought of like, yeah,
browsers are supporting nesting now, right?
That's like a something we can use.
But it is, it's cool to use lightning and optimization in that way.
I would like to shift gears a little bit and talk about tailwind,
the company, tailwind labs.
So we've talked to a lot of open source developers
who are trying to make their projects sustainable.
And open source sustainability is this common thing.
And it's a hard thing to do to work full time on open source and still pay your bills.
And you're very much a success story of what that looks like.
So how have you been able to make to work on tailwind for so long
and to make it sustainable for you and your team?
Yeah, so I think to preface everything,
I think the tricky part of open source sustainability is like,
not all projects are equally sustainable capable, if that makes sense.
There's a lot of like really important projects
that are so buried in the stack that people don't interface with them day to day,
that there's like not a lot of incentive or motivation to support them in some way.
Or there's not obvious ways to productize things around them.
But we're lucky because tailwind is like a tool that you use directly every single day.
It's a front end tool.
There's all sorts of precedent for how people
kind of make money around stuff like this.
Bootstraps had an official theme store for a long time.
Theme forest is like a massively profitable, successful business.
People have sold website templates
like for decades on the internet, you know what I mean?
So we're kind of just lucky in the sense
that the thing that we happen to build had like a lot of
existing just like people have sort of like
trodden the path already for how to sell things around it online, you know?
So sort of the background, really, though, is like Steve and I,
we wrote this book, we're factoring UI together back in like 2018,
which is like a book about like design for developers.
And we did a lot of work for like
about two years leading up to the release of that book to really like build Steve's
audience and build a lot of like authority and reputation around the topic.
And then when we released the book,
it just did like phenomenally, phenomenally well, like a rageously well.
It shocks me to this day.
Like, I think I think it did four hundred
thousand dollars on the first day
and it's done like, I don't know, let's see.
I'm a curiosity.
Lifetime, it's done four million dollars in revenue for just a book
that me and Steve wrote and sold online as a PDF, right?
So we released that in December, 2018,
and that became like how we funded the development of Tailwind after that.
So all of 2019, me and Steve were kind of like working on different ideas
around Tailwind stuff, and that's what became like Tailwind UI,
which is our kind of like the commercial branch of the Tailwind CSS stuff.
So it started out as just like a product with this giant directory of like
styled website components and examples.
So like hero sections for marketing sites,
pricing sections, like feature sections, buttons and forms,
and basically anything that we could think of, like different patterns.
Me and Steve would sit down and brainstorm different layouts and ideas.
He would kind of design high fidelity things and I'd build them
and then we'd throw them together and put it out as part of Tailwind UI.
And so we released that in February, end of February 2020,
and that did really, really well too.
Like same type of launch that we had with
the refactoring UI, which is like quite wild.
And yeah, so then after that came out,
you know, it just kind of felt like, man, there's a lot to do,
there's a lot of GitHub issues to solve,
there's a lot of new things we want to do product-wise,
there's a lot of maintenance that's got to be done on Tailwind.
We have a lot of ideas for new Tailwind related stuff
that just didn't exist yet.
Why don't we try and like find a couple of people to help us?
So we hired like three people over the course of all of 2020.
And yeah,
that's kind of like how it all started and things just kind of
only grew from there.
So like every year, Tailwind UI has done better than it did the year before.
We're always adding new
designs and stuff like that in 2022, mid 2022.
We launched templates, which we didn't have before,
so they're like full Next.js website templates
built with Tailwind and React.
So that was kind of like,
so now there's like two sides of it,
there's like all these component examples,
and then there's like full website templates.
And that's kind of like all we've done.
You know, we just like we released that stuff.
We made sure it was really discoverable
from the Tailwind CSS documentation.
And then we just kind of split our time between sort of improving
the open source projects and making sure that we're still adding,
you know, useful commercial content for customers.
And it's very, yeah, it's just like they just
feed off each other really well.
Like interestingly, I find like the best things we can ever do for business
is actually like big open source releases.
So like when Tailwind 3 came out,
that was a big lift in revenue,
even though it was just a free open source thing,
you know, which is good because that's what I like working on the most.
To me, like the commercial stuff is like a
necessary evil as like too negative,
I think, because it's it's fulfilling and fun to work on too.
But generally, I just want to work on like the tools,
like that's what I get the most excited about.
So to be able to like,
we're really fortunate in that working on the tools is good for business.
Because I think the trap that you fall into, it's not even really a trap,
but like what happens a lot with people trying to make open source stuff
sustainable is trying to get some sort of product in place to pay the bills.
You can work on open source is like really demanding of your time and hard to grow.
Et, you know, starting any business,
you know, it's hard and it takes a lot of work.
It takes like, you know,
more hours than you want it to take.
And there's not a lot of time left over for open source stuff.
After that, you know, like what you need is
what people are looking for when they want to build like a sustainable open source
thing that's funded by like some separate product is what product can I imagine
that's going to take like 15 hours a week of my time so I can spend 25 hours a week
on open source.
And what you're really asking is like,
what business can I start that's going to pay me like a full time salary,
but I only have to work like 15 hours a week,
because that's like really weird saying,
and when you realize that it's like, man,
that's like, that's going to be hard to figure out.
So, yeah, I wish I I wish I had like good advice on what
people can do to be more successful at making the open source stuff sustainable.
I think we are just really fortunate that we happen to be in building
the type of tool that lends itself well to like a commercial component.
You know, I think web frameworks are another one where people have had success,
like because hosting is sort of like a clear business model,
but building like a cloud like hosting service,
that's like, that's a lot of work.
I didn't leave you that much time to work on on the open source framework itself.
You know what I mean?
But for us, anything that we do with
the templates and stuff drives a lot of improvements to Tailwind.
That's where all the good ideas for new Tailwind features come from.
It's Steve's design, something I try to build it and building it is too hard.
How can I make this easier?
We find some cool thing to add to Tailwind or whatever.
So it's it's it's a good symbiotic relationship.
But yeah, that's that's kind of how how our business business works.
It's nothing too crazy.
It's pretty straightforward, very lucky that it works at all.
Et
yeah, I definitely don't take it for granted.
Yeah, that's sort of a rare set up there
because you have an open source tool that's providing value to the community,
which places marketing to a product that is, you know,
people know about because of the open source tool.
But also, you know, a lot of times in adoption,
it's like you have people want to learn like, OK,
what is your product?
How do I use it or whatever?
But their learning is already they're using till one,
you know, and they've been using till one.
And it's like, well, you already know it.
We're just going to give you some prepackage stuff.
So it is a it's a nice model.
Yeah.
And I think the other thing that helped was to your point of like,
you know, it's really like we had to like get tailwind going, you know,
and we were just really lucky that I had a lot of time to spend on it already.
So I went like full time, full time on tailwind in 2019.
But even when I released it in 2017,
I was already working for myself,
creating like ebooks and courses.
I left my job in 2016
after I released a book on functional programming for PHP developers
that was more successful than I expected and thought, oh,
this is fun, like this is awesome for making my own money.
So yeah, I was creating like I did like a test driven development course.
I did like a view course.
And those were kind of done in these like big sprints.
And then filling all the gaps was like working on tailwind CSS stuff
and being able to create do live streams and create content and
and stuff like that to really sort of get the word out there
and make the docs really good and stuff like that.
So yeah, a lot of factors played into it for sure.
Like I don't think tailwind ever would have gotten as popular as it did
if I didn't have the time to really invest in it throughout those years.
And then we didn't try to really like commercialise it
until three years after it was released.
Yeah.
So yeah, I don't know that.
But yeah, that's the story.
Yeah, it's a good story, though.
Like your marketing for refactoring UI, it hit me.
Like I bought the book.
I can like a lot of my UI knowledge is like just
around spacing comes from reading that book and being like, oh, yeah,
je suis juste, like, the key takeaway I took was add as much space as you can
until it looks silly and then dial it back and then you have a good design.
And take it away.
Yeah. Yeah.
Yeah. I mean,
I wrote that book for me, really, you know, so I think that's why it resonated
because I was so desperate to get good at design because I'm not a designer,
but I had access to a great designer and I just like really put every
decision you made under the microscope and try to figure out,
like, how can I make this a math formula, you know, and not an art, you know?
And then figure out how to like
share that with other people before I forget that it wasn't obvious to me,
you know, because I think that's sort of the key thing with with with teaching
in general. I think like it's hard to teach things that you know
really, really well, but you'll do a much better job of connecting with people.
If you're teaching things that like just clicked for you,
because you know exactly
what the gap is that that person needs help crossing.
It's not like some really distant memory.
Like, I remember working with Steve,
we'd be like one of the biggest like Twitter tips we ever had was about
offsetting your box shadows so that like the shadow pokes out of the bottom
instead of all the way around like an element.
And, you know, when I noticed that in Steve's designs,
I was like, dude, like, oh, you always do this.
And this is the reason that this looks good.
Like, we should make a little tip out of this and tweet it.
And he was just like,
everybody knows this, this is like the most obvious thing ever.
If we share this, like no, everyone's just going to laugh at us.
And I was like, dude, I'm telling you,
people don't know this, like I didn't know this, you know?
And then you share it and people are like, wow,
this is like, oh my goodness, I can't believe I didn't realize this before.
This is like, makes such a big difference in everything.
And, yeah, so we were, I think, you know,
it's been an awesome partnership in that sense
because I've sort of been able to act as like
the oblivious non designer.
And Steve has like got all this artistic just intuition and instinct
and that's been practiced for years and years and years, you know?
And just noticing the things and translating them
into language that is going to resonate with other people like me.
And, yeah, you know,
it's, yeah, it did really well.
People seem like really happy with it.
I'm always shocked to go on like Goodreads
and see that it's got like thousands of ratings and stuff on Goodreads or whatever.
It's like, maybe not thousands, can't be thousands.
Oh, seems like a lot.
But just to even feel like my name is on
something on Goodreads at all, kind of just feels wild and that there's so much.
Oh, yeah, literally 1,729 ratings.
Like, that's crazy.
So it is good, though.
So with with any technology that gets as big as tailwind,
there's bound to be some people who don't like the technology.
So why do you think people have such a reaction to it?
Because like, honestly, this past year,
my whole Twitter has just been like arguments about tailwind for some reason.
And do you think any of their arguments ring true?
Yeah, I mean, I think there's multiple elements to it.
I think the first one that everyone will agree on is it just it looks
disgusting, you know, when you see it for the first time, it's
it just seems like clearly a bad idea.
It's like these super long file, like super long lines,
everything like looks like a mess.
It's so just goes against everything that we've sort of been taught
about keeping presentational concerns out of your markup and stuff like that.
It just it feels like so counter to what are generally considered best practices,
that it's hard to even give it a chance.
So I think I think there's that element to it.
But I do think a lot of people get over that
if they just like try it out a bit and try to build something with it.
And that was the same as me.
Like, tailwind wasn't the first like kind of utility, kind of focused CSS,
kind of library.
There was Atomic CSS was like the very first one,
which was way ahead of its time, because
that basically did what tailwind does from the beginning, where it looks at your
HTML files and figures out what CSS to generate dynamically based on what you're
doing, but it had an even more un apologetic syntax than tailwind.
I think it was just like very cryptic, like BG, bracket,
you know, hash, hex code,
whatever, like it very much was not friendly looking.
And I'm like, I can totally stomach that now tailwind
looks like that in a lot of ways now.
But I think like the leap that you have to make from like clean HTML to what
they wanted you to do was like a lot, you know?
And that's not to say that it was wrong, but it's just like,
I can understand why they got the backlash that they did too,
c'est asking people to go really far.
Tachyons, c'est comme une autre library,
c'est très similaire à tailwind,
aussi avec un plus turst sort de cryptic syntax,
que je pense que ça a probablement hâte l'adoption.
Tailwind, on a essayé de mettre un
bout de strap inspiré d'une approche.
On a essayé de faire que les choses soient beaucoup plus approchables,
ce qui a signé que la HTML était
plus verbose et messie.
L'accent est très important,
c'est que les classes, c'est un classen qui a trois lettres,
c'est qu'il y a une grande liste de classen,
et puis il y a 20 de ces classen.
Mais je pense que c'est une grande raison.
Il y a beaucoup de gens qui n'ont pas
essayé de voir ça et qui pensent que c'est horrible.
Mais une bonne partie de ces gens
vont avoir ça si ils y essayent.
Pas tout le monde, et je pense que c'est bien.
Je pense que les gens sont allés à faire des choses de différentes façons.
Je pense que la autre
partie de ça est peut-être un peu plus controversée,
mais je pense que je peux le dire en un degré
qui n'a pas vraiment été controversé.
Mais il y a beaucoup de gens qui
sont passionnés par CSS comme un langage,
qui vraiment
n'a pas l'air de l'avoir et de l'avoir
et de l'avoir avec les sélecteurs et des choses comme ça.
Et je pense que pour des gens comme ça,
la taille de la haute-garde est
en fait de se mettre en place ce qu'ils aiment faire sur le web.
Ce que je peux totalement
empathiser et respecter.
Si vous êtes passionnés
par la faute de la haute-garde,
vous n'aurez probablement pas vraiment
de la haute-garde.
Je pense que c'est un
grand...
Ce n'est pas un grand groupe,
mais il y a beaucoup de gens qui
n'a pas vraiment aimé CSS.
Ils ont voulu écrire CSS,
en tant que quoi ?
Je pense que c'est un autre
source de
la négativité de l'avenir.
Au bout de la journée, je viens de
s'en occuper que
quelque chose de bien
connaissant,
aura des gens qui aiment
et des gens qui n'aiment pas.
Vous ne pouvez pas penser à quelque chose
qui n'a pas l'air de l'avoir.
Apple a les plus grands
superfans sur Terre,
et ça a aussi des gens qui
n'aiment pas, plus que tout le monde.
Tesla a l'air de la même chose.
Il y a des superfans très grands,
et il y a des gens qui
pensent que c'est le plus mauvais
dans le monde.
Tout est suffisamment
successful,
il y a des detracteurs.
Je pense que c'est
tout ce qu'il y a, et c'est bien.
Les gens n'aiment pas
tout.
Je pense que
quand il s'agit de
des choses que j'avoue avec les gens,
des choses qui ne sont pas
idéales avec Tailwind,
je ne sais pas que c'est.
Parce que je pense que les principaux
complérences sont que
on ne devrait pas mixer
la présentation et la marque.
Je suis comme si je ne l'avoue pas
à ce point.
Je me sens comme si
mon HTML est mon UI.
Quand
je n'ai jamais, dans ma vie,
travaillé sur un projet
où je pouvais aller
d'une façon ou d'une façon
de faire un design de façon
diffère, par éditionner le CSS.
Je sais que le CSS,
comme Zengarde, et le site existent,
mais je considère que c'est
un projet d'art plus
réel.
La réalité est que
c'est impossible de l'avouer
en ajoutant un extra div
pour un moment, pour faire
quelque chose que vous avez besoin.
Vous ne pouvez pas
l'avouer pour des situations.
Donc, si il y a un div qui existe
dans la marque, pour le design,
comme Game Over,
et si vous regardez
comment beaucoup d'autres
programmes, les paradigmes
d'UiProgramme,
ce n'est pas
une considération
pour séparer ces choses.
Dans le Swift,
ou dans les formes de wind,
ou d'autres choses,
si vous avez un bouton
et vous voulez changer
la couleur du bouton,
vous changez le couleur
sur le bouton.
Vous ne pouvez pas
faire un autre fil
qui somehow identifie les
boutons et les style.
Vous pouvez vous donner
un style qui vous intéresse.
Je me souviens
quand je faisais des choses visuelles,
je me souviens d'aller cliquer
le bouton et de mettre
un petit plan de propriété sur le bouton
et de mettre la couleur du bouton.
Vous ne pourriez pas...
Ils n'étaient pas découplés,
ils étaient comme la même chose.
Donc,
pour le TML, pour le sentir
comme si je suis type,
comme un bouton angle,
et créer un bouton.
Mais je ne suis pas allowed
à mettre quelque chose présentation
sur ce bouton.
Ça me sent comme si
c'était un peu dévoré
de toute la façon
que chaque autre
programme UI paradigmique
fonctionne.
C'est que ce n'est pas
pas de l'idée de faire.
Et je pense que le autre
piece que je pense que les gens
ne sont souvent
mis en place,
c'est que l'argument
de séparer
votre chose présentationnelle
de votre marqueur
est très bien la même chose
que la toute
chose d'intrusif javascript
que nous avions
fait en ce moment
où vous attachez
l'expérience de l'esprit
nez et le fait















Je ne pense pas que ce soit beaucoup de gens qui réagissent sur ce sujet, qui font ce argument contre Tailwind.
C'est vrai que la plupart des gens qui reconnaissent ça, pensent que c'est bien.
Je pense que ce argument là est toujours comme ça, c'est mal.
Il y a trop de crate dans mon markup.
Je ne veux pas voir toutes ces classes.
Mais oui, il y a des choses que je ne pense pas parfaitement à Tailwind,
mais ce n'est pas des gens qui disent que Tailwind est une bonne chose.
Je pense que, pour moi, la chose que je trouve la plus grande ou la plus faible que je n'ai pas compris comment résoudre Tailwind,
c'est que tu n'as pas de contrôle sur l'ordre que tes styles sont appliqués.
Donc, dans un style sheet, tu peux juste dire les choses dans l'ordre que tu veux qu'elles soient en place.
Donc, si tu as une input et un hover, tu veux que l'autre change pour une couleur un peu plus d'or.
Et puis, sur Focus, tu veux que c'est bleu ou quelque chose, tu devrais faire attention à la state de hover avant le state de focus.
Donc, quand c'est focus, le state de focus prend le précédent sur le state de hover.
En Tailwind, il n'y a pas de manière de changer cette comportement sur une base de perte.
Nous devons donc interpréter.
Nous pensons que le focus est plus important que le hover.
Donc, si tu as un hover, un state de focus et un state de focus sur l'élément avec Tailwind, focus s'en vient.
Et c'est la sorte de chose que je ressens que je veux que nous puissions faire de contrôle de cela à l'end-usage.
Parce que tu peux en CSS et tu ne peux pas vraiment en Tailwind.
La solution pour cela en Tailwind est de, en Tailwind 4, à moins de la façon...
Je vais expliquer deux de la façon.
En Tailwind 3, la façon dont tu le fais, c'est que tu pourrais dire que la base de hover est de black, focus est de red.
Mais si tu voulais être black, while focused, en hover, tu devrais dire que hover BG black, focus BG red, hover focus BG black.
Pour réspecifier.
Si je suis hover et focus, je suis explicitement sur le state que je veux, pas juste de la façon dont je vais les gagner.
Et je pense que c'est bon.
Nous avons l'escape, mais en CSS, tu peux les mettre dans le bon ordre.
Ça semble plus bon.
En V4, nous avons la support pour la classe de nautes pseudo.
Donc, en fait, en disant hover BG black, focus BG red, hover focus BG black,
tu devrais dire hover BG black, focus, non hover BG red.
Et de cette façon, le focus ne se détriguerait pas si c'était focus et hover.
Mais c'est toujours une chose d'annoyant dans mon avis,
et de pouvoir déclarer l'ordre des choses.
Pour moi, c'est la plus grande partie de taillement.
Et non personne parle de ça à moi.
Je pense que je suis seulement intimately enthousiaste de ça
parce que de ce que nous avons fait en cours,
de pouvoir faire le sortage correct et de faire le sortage asintu,
comme possible, et de faire le sortage fast,
mais personne ne complète pas.
Je pense que nous avons fait un bon travail en faisant le fait de la comportement default
et d'intuitive, mais c'est un peu de pouvoir que tu perds.
Et ça me fait pas satisfaire.
Mais ce n'est pas la sorte de chose que personne ne complète pas.
C'est la sorte de chose que quelqu'un qui a l'air de faire,
n'est pas la sorte de chose que quelqu'un qui n'aime pas ce qu'il complète.
Je ne sais pas, est-ce que tu as entendu des critiques
que tu as entendu, que tu serais curieux de faire une opinion?
Je pense que tu as réadressé toutes les choses que je sais.
La seule chose que tu n'as pas fait, c'est de la façon dont ça s'élève
à la compression et à l'extérieur, et à la chute en tout ça.
Je ne peux pas voir l'argument pour que nous ayons beaucoup de choses
dans notre marque.
Le marque peut être envoyé plusieurs fois,
et ça peut augmenter les bundles de la taille.
C'est un problème valid.
Le marque compresse très bien,
parce qu'il y a beaucoup de tokens répétés.
Si tu fais des tests réels, tu verras que c'est rarement signifiant.
Je ne tente pas de ne pas se prévoir pour cette partie.
Mais je pense plus sur le bundle de JavaScript,
parce que les strings en JavaScript ne comprennent pas.
Tu ne peux pas manifester les strings,
parce qu'ils doivent se prévoir sur les autres côtés.
Si tu as des clôtiers longs dans un bundle de JavaScript,
parce que tu es construit comme un Reactop,
ça peut changer tous les noms de chaque compétit
pour un single letter,
et un appel de function pour un crypte qui est très petit.
Mais les strings ne peuvent pas être réduits en size.
Ils vont être compressés bien,
avec GZIP ou Brawley, comme compression.
Mais le file de JavaScript actuale ne peut pas être fait plus petit.
Ça signifie que ça va prendre plus longtemps
pour le browser de parse de la JavaScript.
C'est quelque chose que je pense un peu plus tard.
Je n'ai pas fait de tests sur ça.
Mais c'est un exemple de quelque chose
où avoir beaucoup de strings dans un bundle peut être mal.
Je suis curieux d'expérimenter avec ça
et d'en espérer que ça va être bien.
Mais c'est quelque chose que je suis curieux de voir.
Je ne suis pas sûr de ce que tu peux faire différemment
pour se résoudre,
parce que même avec quelque chose d'un solution CSS et JS
où tu as un prop CSS
et tu as toutes les propres CSS.
Un propres object est toujours un string,
il ne peut pas être compressé,
ça va être encore touché.
C'est probablement un point commun
que tu vas avoir à faire avec n'importe où.
Mais c'est un autre chose d'intéressant
parce que tu peux, d'ailleurs,
réduire le bundle de la size de la string
pour trouver un moyen pour que la string appuie de la même manière.
Donc, si tu as une string qui est répétie,
et tu peux le mettre en variable,
et maintenant, la string n'appuie que de la même manière,
et la variable n'est pas compressée.
C'est quelque chose que nous avons pensé beaucoup
avec les internes TWIN.
Comme nous avons essayé de faire sure
que c'est suitable pour le browser,
nous avons fait beaucoup d'évoquer les strings duplicate
pour garder la ligue de la size de la small.
Ce n'est pas even helping
d'une perspective de rédabilité,
mais juste parce que nous voulons garder la ligue de la small
la plus petite possible.
Donc, si nous décl《
tous les propres des displays,
donc un classe flex,
le flex des displays,
grid est le grid de la displays,
et maintenant, le disple de la phrase apparaît chaque fois.
C'est la sorte de chose où on va râper le tout dans un loop
pour faire surement le disple qui se démarre de l'un à l'autre.
Même si c'est pas encore réel,
mais parce que tu es vraiment tentant de limiter le nombre de strings dans la salle de bundles,
ça peut être aidant.
Donc, oui, je ne sais pas.
Je suis intéressé à faire des tests autour de ça.
Ce n'est pas un problème pour nous en pratique,
ou c'est pas quelque chose que j'ai entendu quelqu'un compléter avec de vrais évidences,
mais ça fait sens,
que ça fait sens pour les tests.
Pour ce qui me fait penser, je ne tend pas à trop penser à ce qu'il fait.
Tailwind fait que le file CSS est vraiment petit,
mais le HTML est plus grand.
Donc, à quel point je me demande si ça fait plaisir.
Je ne pense pas vraiment sur le nombre de files de Tailwind
qui est le principal bénéfice.
Je pense que l'idée que le file CSS ne se développe pas toujours
est un bon bénéfice.
Historiquement, la façon dont j'ai déjà écrit le file CSS,
chaque page que j'ai ajoutée a été plus grande que le file CSS,
en tout cas.
Mais maintenant, le file CSS s'est développé à un rate logarithmique,
où ça flottent en plus,
comme tu utilises plus de classes de nouvelles classes
pour construire des choses en temps.
Donc, c'est bien que ce soit découplé,
parce que il y a beaucoup de sites que tu vas à,
qui ont été online depuis longtemps.
Il y a un site de suite qui est vraiment populaire,
mais pas comme Facebook populaire,
où ils ont une équipe dédicée pour garder les assets
le plus petit possible.
Et ce sont les sites qui ont 6MB de files de file CSS.
C'est quelque chose que je suis curieux de faire,
d'envenger plus.
Je suppose que c'est probablement des petits potés,
comparé à tout le autre casque que les gens ont.
Quand tu es au point où tu as l'envers,
le problème que j'ai vraiment besoin de faire
est d'optimiser mes dimensions.
Tu es dans un bon endroit, je suppose.
C'est vrai.
Je dois toujours me rappeler,
que ton bundle JavaScript est 70 kilobytes plus grande que tu veux,
tu as bien pu délire une image sur ton site.
Tu as sauvé tout ça,
tout cet espace et plus.
Je pense que c'est important
de ne pas avoir des blindes hors-blanches
et de regarder ces choses en isolation.
Et je me souviens,
c'est un petit pourcentage de l'ensemble.
C'est un bandwidth que tu as utilisé quand tu as envoyé des trucs.
Je pense que les considerations de JavaScript
sont valables,
surtout dans les sites que nous construisons
qui sont souvent très clientes.
Tu veux un temps pour interaction,
pour être fast.
Je suis curieux de le benchmarker
et de trouver la meilleure.
Mais ce n'est pas un problème en pratique.
C'est tout pour les questions.
Merci d'avoir regardé le podcast,
c'était un très cool défi
de ce que Tailorin est et a été.
Je pense que c'était un peu plus technique
que beaucoup d'autres qui pensaient
au dessus de l'épisode.
Merci pour votre attention.
Merci pour le défi, je vous apprécie.
Merci d'avoir regardé, Adam.
J'adore cette vidéo de TELAN.
C'est une technologie fascinante
et j'ai vraiment apprécié
la crainte,
la crainte continuelle
que tu as envoyé.
Merci d'avoir regardé.
...