Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Haaste: Lomakkeiden Luominen | Peruskomponenttien Rakentaminen
Tailwind CSS Verkkokehitykseen

bookHaaste: Lomakkeiden Luominen

Tehtävä

Käytä Tailwind CSS:ää lomakkeen tyylittelyyn, jossa on syötekenttiä, tekstialueita, valintanappeja ja kytkin.

Täydennä puuttuvat kohdat sopivilla Tailwind CSS -luokilla halutun ulkoasun saavuttamiseksi.

  • Syötekentät ja tekstialueet:
    • Vaaleanharmaa reunus (border-gray-300);
    • Keskikokoiset pyöristetyt kulmat (rounded-md);
    • Korostustila sinisellä kehällä (focus:ring-2 ja focus:ring-blue-500).
  • Lähetä-painike:
    • Ensisijainen sininen tausta (bg-blue-500);
    • Tummempi sininen hover-tilassa (hover:bg-blue-700);
    • Pyöristetyt kulmat (rounded);
    • Korostustila kehällä (focus:outline-none, focus:ring-2 ja focus:ring-blue-500).
index.html

index.html

copy
  1. Reunaväri: Käytä border-gray-300 vaaleanharmaalle reunalle;
  2. Pyöristetyt kulmat: Käytä rounded-md keskikokoisille pyöristetyille kulmille;
  3. Kohdistusrengas: Käytä focus:ring-2 lisätäksesi renkaan kohdistettaessa ja focus:ring-blue-500 siniselle värille.
  4. Lähetä-painikkeen hover: Käytä hover:bg-blue-700 tummemmalle siniselle hover-tilassa;
  5. Lähetä-painikkeen rengas: Käytä focus:outline-none poistaaksesi oletuskohdistuksen, focus:ring-2 lisätäksesi renkaan kohdistettaessa ja focus:ring-blue-500 määrittääksesi renkaan värin.
index.html

index.html

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

What are the exact Tailwind classes I should use for each form element?

Can you show an example of a fully styled form using these Tailwind classes?

How do I apply these styles to radio buttons and switches with Tailwind?

Awesome!

Completion rate improved to 3.57

bookHaaste: Lomakkeiden Luominen

Pyyhkäise näyttääksesi valikon

Tehtävä

Käytä Tailwind CSS:ää lomakkeen tyylittelyyn, jossa on syötekenttiä, tekstialueita, valintanappeja ja kytkin.

Täydennä puuttuvat kohdat sopivilla Tailwind CSS -luokilla halutun ulkoasun saavuttamiseksi.

  • Syötekentät ja tekstialueet:
    • Vaaleanharmaa reunus (border-gray-300);
    • Keskikokoiset pyöristetyt kulmat (rounded-md);
    • Korostustila sinisellä kehällä (focus:ring-2 ja focus:ring-blue-500).
  • Lähetä-painike:
    • Ensisijainen sininen tausta (bg-blue-500);
    • Tummempi sininen hover-tilassa (hover:bg-blue-700);
    • Pyöristetyt kulmat (rounded);
    • Korostustila kehällä (focus:outline-none, focus:ring-2 ja focus:ring-blue-500).
index.html

index.html

copy
  1. Reunaväri: Käytä border-gray-300 vaaleanharmaalle reunalle;
  2. Pyöristetyt kulmat: Käytä rounded-md keskikokoisille pyöristetyille kulmille;
  3. Kohdistusrengas: Käytä focus:ring-2 lisätäksesi renkaan kohdistettaessa ja focus:ring-blue-500 siniselle värille.
  4. Lähetä-painikkeen hover: Käytä hover:bg-blue-700 tummemmalle siniselle hover-tilassa;
  5. Lähetä-painikkeen rengas: Käytä focus:outline-none poistaaksesi oletuskohdistuksen, focus:ring-2 lisätäksesi renkaan kohdistettaessa ja focus:ring-blue-500 määrittääksesi renkaan värin.
index.html

index.html

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 6
some-alt