Tailwind

Avaa ChatGPT:ssä

Tailwind CSS on hyödyke-perusteinen CSS-kehys, jonka luokkien nimet vastaavat pieniä joukkoja CSS-deklaraatioita. Se on ainoa kuratoitu laajennus, joka toimitetaan mukana, koska suurin osa projekteista ei käytä sitä. Aktivoit sen id:llä, samalla tavalla kuin kytket päälle minkä tahansa laajennuksen, katso Enabled by id. Kun se on päällä, se tekee jotain, mitä muut eivät tee: se generoi oman sisääntulonsa.

How it works

Sen sijaan, että koottaisiin tiedosto, jonka olet kirjoittanut, Tailwind-laajennus skannaa sovelluksesi lähteitä niiden käyttämien hyödyke-luokkien nimien löytämiseksi, generoi tyylisivun, joka sisältää vain nuo hyödykkeet, ja lataa sen joka näkymälle. Näkymä soveltaa sitten hyödykkeitä luokkien niminä ilman mitään tuontia:

TailwindView.java

@Route("/tailwind")
public class TailwindView extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();

  public TailwindView() {
    Div card = new Div("Styled by compiled Tailwind utilities");
    card.addClassName("flex", "items-center", "gap-4", "p-8", "rounded-lg",
        "bg-blue-500", "text-white");
    self.add(card);
  }
}

Generoitu tyylisivu tuo Tailwindin teeman ja hyödykkeet, mutta ei sen perusasetusta. Perusasetuksen, Tailwindin esilennon, tyyli kaikille paljaalle elementille sivulla, mikä ohittaa sen tyylin, jonka webforJ jo soveltaa komponentteihinsa. Jättämällä sen pois, hyödyklasseja, jotka lisäät, toimivat ilman, että häiritset komponentteja, joita et ole muuttanut.

Koska hyödykkeet tulevat niiden luokkien nimistä, joita näkymäsi käyttävät, frontend watch seuraa sovelluksesi lähteitä sekä src/main/frontend. Lisää tai poista hyödykelas näkymässä ja tallenna, niin tyylisivu regeneroituu ja korjataan sivulle paikoilleen, samoin kuin muokkaamalla kirjoittamaasi tyylisivua.

Where utility classes reach

Hyödyklassi tyylittää elementin, ei komponentin sisäosaa

webforJ-komponentit renderoidaan varjosovelluksen (shadow DOM) avulla, joka pitää sisäisen rakenteensa yksityisenä. Komponenttiin lisätty hyödyklassi tyylittää vain sen ulkokuoren, sen välistä, kokoa ja paikkaa asettelussa, eikä koskaan saavuta sen sisällä piirrettäviä elementtejä. Hyödykkeet soveltuvat kuten niiden luokkien nimet lukevat asettelu-kontaineriin tai tavalliseen Div:iin, jonka rakennat, missä ei ole raja, mutta eivät rakennettujen komponenttien sisäosiin.

Tyylittääksesi komponentin sisäosat, käytä sen exponoimaa tyylitystä sen sijaan: shadow parts ::part()-kautta ja komponentin CSS mukautettuja ominaisuuksia, jotka molemmat löytyvät kunkin komponentin tyyliviitteestä. Pidä hyödykkeet asettelua varten ja omia elementtejäs varten, ja käytä komponentin omaa tyylitystä komponentin tarkentamiseksi.

Tyylisivu sisältää hyödykaluokkien nimet, jotka skannaus löytää lähteistäsi, ja vain ne. Luokka, jonka kirjoitat selaimen tarkastajaan kokeillaksesi ideaa, ei sovellu, koska sitä ei koskaan koottu. Laita luokka näkymään ja tallenna, niin watch regeneroi tyylisivun sen kanssa.

Kun sama hyödykkeiden ryhmä toistuu monilla näkymillä, nimeä se: määrittele CSS-luokka kerran ja lisää se sen sijaan. Muutama inline-hyödyke pysyy luettavana, mutta pitkä merkkijono, joka toistuu käsin, voi hämärtyä muokatessasi.

Options

Tailwind-laajennus ei ota vastaan asetuksia bun.config.ts -tiedostosta. Se generoi ja skannaa oman tyylisivunsa, ja Tailwind itsessään on konfiguroitu tuon tyylisivun kautta sen sijaan, että se olisi konfiguroitu laajennuksen kautta.