CSS approach discussion

Vývoj
1

@martinwenisch , @krystof-k

There is a pretty heavy usage of css properties (gridTemplateAreas, gridAreas…) which Tailwind does not support by default.

In case we want to get inspiration / copy approach of the current layouts in Vue, there are two possible solutions to this problem.

  1. Inline use of style css in js
  <div
    className="grid grid-rows-[auto_auto_1fr]"
    style={{ gridTemplateAreas: `"header" "sticky-header" "main"` }}
  >
  1. By defining our own custom utilities (components) in css file
@layer components {
  .main-layout-grid {
    grid-template-areas: "header title right";
  }
}

Usage:

Playground link

I tend for the second approach even it is a way tailwind’s approach. The problem is it is still (as far I know) not solution for all cases (e.g. generating custom gridArea positions with JS index/map in case of a comparisonPage)

2

Jaky na to mas use case v Kalkulacce? Nejde na to pouzit row-span col-span? Ja jinak grid nepouzivam.

*a pisme tu cesky, udelame ceskou sekci tady na foru.

3

Na gridTemplateAreas / gridAreas jsem narazil docela často (comparisonPage, questionPage, téměř všechny pageContainery…)

Co jsem si pročetl, tak tyto properties se hlavně používají kvůli intuitivnější definici layoutu.

Nakonec to vypadá, že to půjde řešit čistě tailwindem (viz docs, arbitrary-props)

Zde demo comparison page:

@krystof-k případně poprosím o comment, zda je na tomto approachi obecně něco, čemu bychom se chtěli v nové verzi vyhnout

4

Ten playground vypada v pohode, jenom je tam mozna zbytecne moc custom tagu [xyz], treba z-indexy. Ktery muzou bejt klasicky preddefinovany.

Nejsem si jistej, jak moc stoji za to se v tom hrabat (i kdyz moderni grid v css je super skill), pouzivani gridu ve vetsine aplikaci je fakt basic. I tady si myslim, ze kdybysme chteli, tak to jde psat jenom v zakladnim formatovani, ktery ten tailwind ma by default.

Nejakej specifickej nazor na pouziti konkternich css ficur nemam. Dokud to bude relativne dobre citelny a fungovat ve vetsine prohlizecu.

5

jenom je tam mozna zbytecne moc custom tagu [xyz] , treba z-indexy. Ktery muzou bejt klasicky preddefinovany.

Ano, ty ty klidně použijeme z TW, já to rychle kopíroval z live verze, ať zkontroluji funkčnost layoutu. Zbytek věcí které jsou ve square brackets zůstat musím, protože je by default tw nemá nadefinované (co půjde mohli bychom teoreticky hodit do .css configu)

Nejsem si jistej, jak moc stoji za to se v tom hrabat (i kdyz moderni grid v css je super skill), pouzivani gridu ve vetsine aplikaci je fakt basic. I tady si myslim, ze kdybysme chteli, tak to jde psat jenom v zakladnim formatovani, ktery ten tailwind ma by default.

V principu nemám problém, ale u té comparisonPage bychom se asi jen s TW classes hodně zapotili, možnost používat ty css attributy takto arbitrary-like mi přijde praktická.

S defaultem by možna šlo vyřešit ty page/content containery (main, sticky-header, header, bottom-bar). Každopádně musím říct, že i přes složitější čítelnost některých věcí je to pořád jednodušší takto udržovat když jsou na příklad ty areas takto explicitně nadefinované stringama. V developmentu jsem ponechal verzi, která je komponentově postavena a dá se v tom vyznat relativně dobře.

1 Like