Use threads

[tulip bison]

rendering on client => sending javascript on the client that will handle creating the UI rendering on server => sending pure HTML and css

so it's better performance to render on server?

[agile lava]

if ure using tailwind, the pure html and css is already sent so no more js to compile tailwindcss stuff

its better performance FOR YOUR browser to render on server but not for your server if it requires a lot of rendering

[tulip bison]

so Tailwind made the decision to render on client

if that's better for server, what's the issue?

[agile lava]

no, tailwind is rendered on the server

[tulip bison]

oh

[agile lava]

who is saying Tailwind is rendered on client?

[tulip bison]

but this "client" in NextJS appears to be an issue

[woeful pendant]

he is confusing headlessui with tailwind pure

[tulip bison]

oh, yes i think so

[agile lava]

its not... gosh...

it all depends on the case

are you building SSG or SSR or Client App

[tulip bison]

i asked what the issue is with "client" for headlessUI and got this link: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

[woeful pendant]

that explains what “use client” is

[agile lava]

Again, based on your case. What are you trying to build?

[woeful pendant]

you should read through that regardless…

[tulip bison]

oh, you try to stay away from "use client"?

[granite wraith]

the bad thing about rendering on the client it may decrease performance
and its bad for SEO

[woeful pendant]

seo. seo. seo. and ssr

[tulip bison]

but "use client" is forced with Tailwind Components, by the sounds of it?

but not regular tailwind?

[agile lava]

NOOOOOOOOOO

[granite wraith]

so you'd try to stay away from it in elements that are SEO important

[granite wraith]

n o XD

[tulip bison]

lol sorry i misundestand

[granite wraith]

tailwindcss = css

but better

[woeful pendant]

headlessui != tailwindcss

[agile lava]

YES

use Client isn't needed in regular tailwind

[tulip bison]

i thought tailwind components use headlessui?

[woeful pendant]

headlessui USES tailwind.

[tulip bison]

ohhh

[woeful pendant]

not the other way

[tulip bison]

headlessui is a tailwind alternative?

[granite wraith]

bonk

[tulip bison]

they are not connected

[agile lava]

bonk (2)

[tulip bison]

built by the same team?

[granite wraith]

tailwind uses css , headlessUI uses tailwind

[tulip bison]

or different teams

[agile lava]

@tulip bison you need to rewatch this https://www.youtube.com/watch?v=CQuTF-bkOgc

this already clears all of your confusion

[tulip bison]

alright haha

will do

[agile lava]

especially this

to clarify why HeadlessUI =/= tailwind

you STILL need to use CLIENT to make interactive components regardless whatever library you choose

its not a "use client" good or bad thing, it all depends on how you choose to use it

its like a Knife, it can be used to hammer a nail, or cut a tenderloin

[woeful pendant]

not with server actions

[agile lava]

he can barely even get started and now ure introducing more /jk ure true

[tulip bison]

so he shows TailwindUI as his go to, rather than DaisyUI, and then it's just copy & paste source code
but there is something preventing ppl from stealing this source code without paying? I don't understand that part, how that works

[agile lava]

maybe an NDA? idk

but if you can create it yourself why look for paid resource

shadcn is building one, tailwindcss components

[tulip bison]

time saver

[agile lava]

daisyui exists, you can pair it with headlessUI/radix

[tulip bison]

he says he prefers TailwindUI, rather than DaisyUI, but doesn't really go into the details of why

just "Tailwind Fanboy"

whatever that means

I guess it looks better, if I compare the two

TailwindUI is like an Apple product
DaisyUI is like a Microsoft product

haha, i dunno

[agile lava]

no its 2 different thing

not jsut looks

tailwindcss is bare css
daisyui is ready-made UI

you said its a time saver so i propose you use ready made UI
you said you want it performant so it has to be prerendered so can't have things like MUI or Chakra since its loaded, client rendered
you said you don't want to pay 300 dallah so Tailwind Components is out of the question
and you're left with DaisyUI

[tulip bison]

what about https://www.radix-ui.com/?

[agile lava]

Just because someone didn't use it doesn't meant that you can't use it
you NEED TO FOLLOW YOUR CASE. what do you need?

[tulip bison]

I think I prefer the design style of Radix over Daisy

[agile lava]

oh my god

what design style are you talking about, theres no comparison in design style between radix and daisy

[tulip bison]

https://www.radix-ui.com/docs/primitives/components/navigation-menu
https://daisyui.com/components/navbar/

aren't these comparisons? with pre-built components for navbars, for example

Radix looks a lot better

[agile lava]

haha

when you find out Radix comes in unstyled

and you need to style the components on your own

[tulip bison]

you can't just copy and paste this Radix navbar into your NextJS + Tailwind project?

[agile lava]

copy paste from where

[tulip bison]

it's confusing, i should continue watching the video. maybe he will convince me to just pay for TailwindUI

from here

[agile lava]

idk, probably understand what these different circle meant?

you seem to be mixing them all together

[tulip bison]

yes, I think so

I'm coming from CSS3 core web technology and this feels like jumping into ice cold deep waters, just for styling a website lol

but with enough understanding hopefully I won't get eaten by sharks 😛

right now i'm drowning, so to speak, lol

[agile lava]

so

components have Logic part and Style part

Radix provides component Logic
Tailwindcss provides Style

Ready Made UI library already contains both logic and style

[tulip bison]

LOL. apparently using Bootstrap is negative on the beauty scale

worse than no CSS at all

[agile lava]

need to remind you that some of that might be biased

[tulip bison]

yep, for sure

I think ppl are just sick of Bootstrap looking sites, and he gives a good point how there are too many changes in the CSS you gotta do, to modify Bootstrap

if you look at the actual CSS being used, it's pretty ugly

[agile lava]

yes

[tulip bison]

like 50 declarations for a simple button style

[agile lava]

bootstrap is comparable to DaisyUI, TailwindUI, and MaterialUI

but not radix 💀

[tulip bison]

right

and I kinda wanna stay away from "Component Libraries"

MUI, Mantine

I think I understand now

Radix is a "Behaviour Library"

I just need Tailwind for CSS++ features, and something like TailwindUI for a nice Style System

Or DaisyUI to save money on a Style System, but not be as nice as TailwindUI

does that sound about right?

[agile lava]

yeah thats better

[woeful pendant]

dunno about radishes kek but the other ones are right

[tulip bison]

Radix is not grouped with TailwindUI and DaisyUI

I will ignore Bootstrap altogether shudder

[woeful pendant]

never heard of something called a behavior library

someone made that shit up

[tulip bison]

yeah, apparently it's not the same thing as a "Style System"

[agile lava]

its like premade usestate and useeffect components (and context)

[woeful pendant]

its a fuckin component library

people try to make up new words

[tulip bison]

No, a component library is MUI, Mantine

[woeful pendant]

its a component library. end of story

[tulip bison]

No.

[agile lava]

yeah but we need new word to categorize styled component library and unstyled component library

[woeful pendant]

mui. and headless ui literally have the same components. mui just has more

[tulip bison]

these are the only 2 "Component Libraries"

on this list i mean

prob many more

[agile lava]

its 2 different pattern
headlessUI is headless... MUI needs top level context

[woeful pendant]

no it doesnt. thats only if you want a global theme

you can literally use it the same way

[agile lava]

yeah but HeadlessUI is unstyled,

it doesn't conform to any aesthetics or theme

[woeful pendant]

i dont care how much yall wanna split hairs. they are component libraries. one has more featues. but they are both libraries of components

[agile lava]

yeah

we're like discussing different types of component libraries

do you want to get bald like me

[woeful pendant]

mui is a highly opinionated, fully featured component library

[agile lava]

thats why you have the unstyled, a.k.a behavior libraries

[woeful pendant]

headlessui is a highly unopinionated, barebones component library

[woeful pendant]

i am not using new entire words for something that doesnt need it. we have descriptive words for a reason

[agile lava]

behavioral is an adjective to describe a noun wdym 💀

[woeful pendant]

“stop trying to make fetch happen” - mean girls haha

im too old to fight the ever changing buzzwords. ill describe the features or lack thereof of the component library and call a spade a spade

[agile lava]

but you are right, its a term made by theo and its only based on his preference

could've worded it better

[woeful pendant]

css++ is stupid too

its a css framework

so is sass

he just wants to be different

@tulip bison this is what matters. when you walk up to a dev older than… i dunno… 25ish… and say “behavior library” they are gonna roll their eyes at you and walk away

if you ask them for an unstyled component library chances are they will have a suggestion

[tulip bison]

OK

@woeful pendant do you only get to view all 500+ components after payment and sign in?

[woeful pendant]

yep

ruined your “steal the code” idea huh? haha

[tulip bison]

lol, I was wondering how they could prevent "View Source", but now I get it

how often do they update it?

would there be any way to "see" all 500+ components before paying?

[woeful pendant]

i dont keep track

it has way more shit than ive ever used

its got a LOT

[tulip bison]

nice

seems worth it

[woeful pendant]

and its all html / tailwind. a few things use headlessui

so its not a library. more of a copy paste as you need it

[tulip bison]

so long as Tailwind will be around for a long time to come

[tulip bison]

headlessUI is more for accessibility? https://www.a11yproject.com/

so only certain elements would need that, like navbar, inputs, dropdowns, etc.

[woeful pendant]

um… no

its just 8 components

[tulip bison]

oh, but TailwindUI handles all that, right?

[woeful pendant]

8 unstyled components

[tulip bison]

no need to worry about a11y with TailwindUI

[woeful pendant]

i dont do the a11y stuff so i have no opinion on that

[agile lava]

Accessibility is a feature of headlessui.

Compinent logic doesnt come with accesebility and you need to add your own implementation of the accesibility, following html standards

[tulip bison]

you mean there are only 8 components that actually use "HeadlessUI", out of the 500+ components?

[woeful pendant]

headlessui has 8 components

go to the site

look at it

thats all it is

[tulip bison]

I see 10

[woeful pendant]

10

but not really

[tulip bison]

so all 10 of these require JS of some sort, ya?

to work correctly

therefor, it must go to the client

[woeful pendant]

disclosure and dialog are basically the same thing

[woeful pendant]

correct

[tulip bison]

OK

I finally understand

[agile lava]

Wdym

[tulip bison]

and that's what Radix does. Only the JS part, the "behaviour"

[agile lava]

Disclosure are accordions, dialogs are modal or popups

[woeful pendant]

look at the source. the only difference is that one enforces 1 at a time.

but you can make a dialog have multiple sections, and you can make a disclosure only have 1 section

they have a whole discussion on it on the github discussions page

[agile lava]

Its 2 different ui component many fe engineer will be mad at you 💀

With different uses

[woeful pendant]

sure. lemme change 1 param and call it something else

call a spade a spade

9 components

😂

[agile lava]

You can do that but the purpose would still be different

[tulip bison]

does this include Figma files of any type?

[agile lava]

Disclosure is like to hide and show content while dialog just shoves the thing up to your face

Dialog uses portal

I am malding

[woeful pendant]

hear me out

thats called a damn accordian

and has been for years

[tulip bison]

so no way to preview all 500+ components before purchasing All Access?

[woeful pendant]

nope

[tulip bison]

and all templates (how many in total for All Access?)

[woeful pendant]

a lot. im not gonna count them but theres a whole whole lot

i dont make any money from them… i just think its well spent money if you are serious

[agile lava]

They cant have figma files or it will be easily shared

[woeful pendant]

right

[tulip bison]

yeah, I am reading no design files, and also they have 30 day refund

so if i don't like it I can get money back

maybe i will give it a try, it does seem like the crown jewel for all options out ther

[agile lava]

Yeah and when you refund it you have to remove all tailwindui component /j

[woeful pendant]

goes without saying

[tulip bison]

this goes back to the first question, about "View Source", how do they know you have removed all tailwindui components from your website?

there was some word "Alias" or something that was said I didn't understand

some sort of technology for how they can check?

[agile lava]

No, alias just mask the classname to something else so you cant easily copy paste them

[tulip bison]

oh

so it's an honor system if you get refund, to remove all tailwindui

just wondering, not that i would do that

[agile lava]

Idk, @woeful pendant say it goes without sayin so i assume he know what happens

[woeful pendant]

if they found out they can sue

its in their tos

[agile lava]

Scary

[woeful pendant]

(wife is a laywer she likes to read that drivel haha)

[agile lava]

I live in the sea they cant sue me

[woeful pendant]

ariel? is that you?

[tulip bison]

like i wonder if anybody has posted all 500+ components to a GitHub repo somewhere lol.. probably a bad idea with TOS..
but kids are doing it these days with all types of software, and staying anonymous, so i wouldn't be surprised

[agile lava]

part of your world ~

[woeful pendant]

these people made tailwindcss for free. people gotta eat. pay people for stuff thats worth it comeon

[agile lava]

Definetly not github probably mega.nz or filezippy 😭

[tulip bison]

https://github.com/kiliman/tailwindui-crawler

apparently this is allowed!

crazy..

[shut galleon]

Lemme tell you a story of a certain book, called “refactoring ui”, written by the same authors as tailwind, listed at 99 dollars and its pdf is literally in several anonymous github repo

They can sue yes, but they mostly trust their customers

They don’t have a team focusing on finding their product being illegally used or distributed elsewhere

If you are a software developer you should make enough money to never worry about this kind of thing

[tulip bison]

true

[agile lava]

calculated loss

[tulip bison]

https://www.refactoringui.com/checkout/team-25

Get the Refactoring UI Complete Package to share with your entire team.

$2,749 USD

[agile lava]

doesnt change the fact that im a student and im broke

[tulip bison]

why would anybody get this

when there is TailwindUI

[shut galleon]

They are not for the same thing

The book teaches you UI design

[agile lava]

Someone want to know how to create tailwindui vs just using tailwindui i guess?

[tulip bison]

$2,749 USD, I guess you save $1000 compared to 25 individual purchases

[shut galleon]

Tailwind UI gives you designed components

They are just not the same thi g

Alright since I don’t want to go bald, have fun

[tulip bison]

maybe for a company like Uber to make their own design system: https://baseweb.design/

[tulip bison]

fyi, https://www.zippyshare.com/

lol alright no preview

too many ppl using it for the wrong reasons maybe heheh