Lompat ke isi

Tailwind CSS: Perbedaan antara revisi

Ensiklopedia Pengetahuan Universitas Islam Sultan Agung

Maintenance script (bicara | kontrib)

37.956 suntingan
Maintenance script (bicara | kontrib)
37.956 suntingan
Impor teks terkontrol dari Wikipedia bahasa Indonesia; revisi 29382953; atribusi sumber disertakan.
 
Maintenance script (bicara | kontrib)
37.956 suntingan
Presentation V4: sitasi, referensi, Math, Wikimedia Commons, dan atribusi
 
Baris 1: Baris 1:
'''Tailwind CSS''' adalah [[Framework|kerangka kerja]] (''framework'') [[CSS]] yang di dalamnya terdapat sekumpulan ''utility classes'' untuk membangun antarmuka kustom dengan cepat. Tailwind CSS berbeda dengan kerangka kerja CSS seperti [[Bootstrap (kerangka kerja)|Bootstrap]], Bulma, atau Foundation, karena Tailwind CSS bukan sebuah ''UI Framework.'' Tailwind CSS tidak memiliki tema default maupun komponen UI bawaan. Tailwind CSS dirancang agar dapat digunakan oleh pengguna sesuai dengan desain kustom yang mereka inginkan.
'''Tailwind CSS''' adalah [[Framework|kerangka kerja]] (''framework'') [[CSS]] yang di dalamnya terdapat sekumpulan ''utility classes'' untuk membangun antarmuka kustom dengan cepat.<ref>[https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML]. ''tailwindcss.com''.</ref> Tailwind CSS berbeda dengan kerangka kerja CSS seperti [[Bootstrap (kerangka kerja)|Bootstrap]], Bulma, atau Foundation, karena Tailwind CSS bukan sebuah ''UI Framework.<ref>[https://tailwindcss-v0.netlify.app/ Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development]. ''tailwindcss-v0.netlify.app''.</ref>'' Tailwind CSS tidak memiliki tema default maupun komponen UI bawaan. Tailwind CSS dirancang agar dapat digunakan oleh pengguna sesuai dengan desain kustom yang mereka inginkan.<ref>[https://tailwindcss.com/ Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs]. ''tailwindcss.com''.</ref>


== Sejarah ==
== Sejarah ==
Tailwind CSS dibuat oleh Adam Wathan—sekarang menjabat sebagai [[CEO]] Tailwind Labs—dan rekannya yang bernama Steve Schoger.
Tailwind CSS dibuat oleh Adam Wathan—sekarang menjabat sebagai [[CEO]] Tailwind Labs—dan rekannya yang bernama Steve Schoger.<ref>[https://www.offerzen.com/blog/adam-wathan-story-tailwind-css The Story of Tailwind CSS feat. Adam Wathan]. ''The OfferZen Community Blog''.</ref>


Versi alpha Tailwind CSS resmi dirilis pada tanggal 1 November 2017 dan hingga saat ini Tailwind CSS sudah mencapai versi 3.1.8.
Versi alpha Tailwind CSS resmi dirilis pada tanggal 1 November 2017 dan hingga saat ini Tailwind CSS sudah mencapai versi 3.1.8.<ref>[https://tailwindcss.com/docs/release-notes Release Notes - Tailwind CSS]. ''tailwindcss.com''.</ref>


== Perbedaan dengan kerangka kerja lain ==
== Perbedaan dengan kerangka kerja lain ==
Situs web resmi Tailwind CSS menyatakan bahwa dengan menggunakan Tailwind CSS pengguna dapat mengembangkan sebuah web modern tanpa meninggalkan ''[[Berkas komputer|file]]'' [[HTML]] ketika proses pengembangan. <blockquote>" ''Rapidly build modern websites without ever leaving your HTML'' "</blockquote>Selain itu, perbedaan lain Tailwind CSS dengan kerangka kerja (''framework'') lain seperti Bootstrap yaitu Tailwind CSS merupakan ''Utility-First Framework'', sedangkan Bootstrap adalah ''UI Framework.''
Situs web resmi Tailwind CSS menyatakan bahwa dengan menggunakan Tailwind CSS pengguna dapat mengembangkan sebuah web modern tanpa meninggalkan ''[[Berkas komputer|file]]'' [[HTML]] ketika proses pengembangan.<ref>[https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML]. ''tailwindcss.com''.</ref> <blockquote>" ''Rapidly build modern websites without ever leaving your HTML'' "</blockquote>Selain itu, perbedaan lain Tailwind CSS dengan kerangka kerja (''framework'') lain seperti Bootstrap yaitu Tailwind CSS merupakan ''Utility-First Framework'', sedangkan Bootstrap adalah ''UI Framework.''


== Utilities Tailwind CSS ==
== Utilities Tailwind CSS ==
''Utility'' adalah kelas HTML sederhana yang biasanya berada dalam satu ''scope'' properti CSS, seperti ''border-style'' atau ''background-color.'' Berikut adalah contoh ''utility classes'' yang ada di Tailwind CSS:
''Utility'' adalah kelas HTML sederhana yang biasanya berada dalam satu ''scope'' properti CSS, seperti ''border-style'' atau ''background-color.''<ref>[https://designsystem.digital.gov/utilities/ Utilities]. ''U.S. Web Design System (USWDS)''. 2022-10-11.</ref> Berikut adalah contoh ''utility classes'' yang ada di Tailwind CSS:
{| class="wikitable"
|+Contoh: ''yellow notice''
! scope="row" |Hasil
| colspan="2" |
|-
! scope="row" |Kode
| colspan="2" |<syntaxhighlight lang="html">


  <p>Please be careful when feeding the birds.</p>
</syntaxhighlight>
|-
! rowspan="6" scope="row" |''Classes''
!Tailwind
!Vanilla CSS atau CSS polos
|-
|
|<syntaxhighlight lang="css" inline="1">margin: 1rem;</syntaxhighlight>
|-
|
|<syntaxhighlight lang="css" inline="1">padding: 1rem;</syntaxhighlight>
|-
|
|<syntaxhighlight lang="css" inline="1">background-color: rgba(229, 231, 235, 1);</syntaxhighlight>
|-
|
|<syntaxhighlight lang="css" inline="1">font-weight: 700;</syntaxhighlight>
|-
|
|<syntaxhighlight lang="css" inline="1">border-radius: 0.5rem;</syntaxhighlight>
|}


=== Jenis-jenis ===
=== Jenis-jenis ===
Ada banyak jenis ''utility class'' di Tailwind CSS yang memungkinkan pengguna untuk mengontrol dan melakukan kustom properti CSS sesuai dengan keinginannya, seperti warna font, ukuran font, jenis font, ''padding'', ''margin'', ''display'', dan lain sebagainya.
Ada banyak jenis ''utility class'' di Tailwind CSS yang memungkinkan pengguna untuk mengontrol dan melakukan kustom properti CSS sesuai dengan keinginannya, seperti warna font, ukuran font, jenis font, ''padding'', ''margin'', ''display'', dan lain sebagainya.<ref>[https://tailwindcss.com/docs/utility-first Utility-First Fundamentals - Tailwind CSS]. ''tailwindcss.com''.</ref>


Berikut adalah beberapa daftar ''utilities'' yang terdapat pada Tailwind CSS:
Berikut adalah beberapa daftar ''utilities'' yang terdapat pada Tailwind CSS:  


* ''Preflight''
* ''Preflight''  
* ''Layout''
* ''Layout''  
* ''Tables''
* ''Tables''
* ''Typography''
* ''Typography''  
* ''Effect'' & ''filters''
* ''Effect'' & ''filters''  
* ''Flexbox'' & ''grid''
* ''Flexbox'' & ''grid''  
* ''Spacing'' & ''sizing''
* ''Spacing'' & ''sizing''  
* ''Background'' & ''border''
* ''Background'' & ''border''  
* ''Transition'', ''transformation'' & ''animation''
* ''Transition'', ''transformation'' & ''animation''  
* dan lain sebagainya
* dan lain sebagainya


== Fitur-fitur ==
== Fitur-fitur ==
Adapun beberapa fitur-fitur unggulan yang terdapat pada Tailwind CSS adalah sebagai berikut :
Adapun beberapa fitur-fitur unggulan yang terdapat pada Tailwind CSS adalah sebagai berikut :<ref>[https://tailwindcss.com/docs/installation Installation: Tailwind CLI - Tailwind CSS]. ''tailwindcss.com''.</ref>


* ''Utility-first concept''
* ''Utility-first concept''
* ''Interactivity''
* ''Interactivity''
* ''Responsive design''
* ''Responsive design''  
* ''Dark mode''
* ''Dark mode''
* ''Reusability''
* ''Reusability''
* ''Custom styles''
* ''Custom styles''
* ''Functions & directives''
* ''Functions & directives''  


== Penggunaan Tailwind CSS ==
== Penggunaan Tailwind CSS ==
Ada beberapa cara penggunaan (instalasi) Tailwind CSS berdasarkan situs web resmi Tailwind CSS. Di antaranya yaitu:
Ada beberapa cara penggunaan (instalasi) Tailwind CSS berdasarkan situs web resmi Tailwind CSS. Di antaranya yaitu:<ref>[https://tailwindcss.com/docs/installation Installation: Tailwind CLI - Tailwind CSS]. ''tailwindcss.com''.</ref>


* Tailwind CLI
* Tailwind CLI  
* PostCSS
* PostCSS
* Play CDN
* Play CDN
Baris 50: Baris 80:
Berikut adalah salah satu contoh penulisan kode Tailwind CSS apabila dibandingkan dengan Bootstrap dan vanilla CSS (CSS polos) :
Berikut adalah salah satu contoh penulisan kode Tailwind CSS apabila dibandingkan dengan Bootstrap dan vanilla CSS (CSS polos) :


'''Tailwind CSS''''''Bootstrap 5''''''Vanilla CSS'''
'''Tailwind CSS'''<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
 
  <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body>
  <button type="submit" class="bg-blue-600 text-white px-3 py-2 rounded hover:bg-blue-700">Submit</button>
</body>
 
</html>
</syntaxhighlight>'''Bootstrap 5'''<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
 
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
 
<body>
  <button type="submit" class="btn btn-primary">Submit</button>
</body>
 
</html>
</syntaxhighlight>'''Vanilla CSS'''<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
 
  <style>
    .button {
      padding: 6px 12px;
      border-radius: 4px;
      background-color: #0D6eFD;
      color: white;
      border: 0;
      transition: 0.2s;
    }
  </style>
 
</head>
 
<body>
  <button type="submit" class="button">Submit</button>
</body>
 
</html>
</syntaxhighlight>


== Versi ==
== Versi ==
Baris 56: Baris 151:


* [https://tailwindcss-v0.netlify.app/ Versi v0.7.4]
* [https://tailwindcss-v0.netlify.app/ Versi v0.7.4]
* [https://v1.tailwindcss.com/ Versi v1.9.6]
* [https://v1.tailwindcss.com/ Versi v1.9.6]  
* [https://v1.tailwindcss.com/ Versi v2.219]
* [https://v1.tailwindcss.com/ Versi v2.219]
* [https://tailwindcss.com Versi v3.1.8] (versi saat ini)
* [https://tailwindcss.com Versi v3.1.8] (versi saat ini)


== Lihat pula ==
== Lihat pula ==
* [[Bootstrap (kerangka kerja)|Bootstrap CSS]]
* [[Bootstrap (kerangka kerja)|Bootstrap CSS]]
* [[HTML]]
* [[HTML]]  
* [[CSS]]
* [[CSS]]  
* [[JavaScript]]
* [[JavaScript]]  
* [[Situs web|Situs Web]]
* [[Situs web|Situs Web]]
* [[Desain web responsif]]
* [[Desain web responsif]]
* [[Npm (perangkat lunak)|NPM]]
* [[Npm (perangkat lunak)|NPM]]
== Referensi ==


== Pranala luar ==
== Pranala luar ==
* [https://github.com/tailwindlabs/tailwindcss Repository github Tailwind CSS]
* [https://github.com/tailwindlabs/tailwindcss Repository github Tailwind CSS]


 
== Referensi ==
<references />


== Sumber dan atribusi ==
== Sumber dan atribusi ==


Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Tailwind+CSS&oldid=29382953 Wikipedia bahasa Indonesia], revisi 29382953 (2026-06-24T10:10:41Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Mohon gunakan konten ini secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.
Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Tailwind+CSS&oldid=29382953 Wikipedia bahasa Indonesia], revisi 29382953 (2026-06-24T10:10:41Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Mohon gunakan konten ini secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.
<!-- WIKI_UNISSULA_PRESENTATION_V4 -->

Revisi terkini sejak 23 Agustus 2026 14.08

Tailwind CSS adalah kerangka kerja (framework) CSS yang di dalamnya terdapat sekumpulan utility classes untuk membangun antarmuka kustom dengan cepat.[1] Tailwind CSS berbeda dengan kerangka kerja CSS seperti Bootstrap, Bulma, atau Foundation, karena Tailwind CSS bukan sebuah UI Framework.[2] Tailwind CSS tidak memiliki tema default maupun komponen UI bawaan. Tailwind CSS dirancang agar dapat digunakan oleh pengguna sesuai dengan desain kustom yang mereka inginkan.[3]

Sejarah

Tailwind CSS dibuat oleh Adam Wathan—sekarang menjabat sebagai CEO Tailwind Labs—dan rekannya yang bernama Steve Schoger.[4]

Versi alpha Tailwind CSS resmi dirilis pada tanggal 1 November 2017 dan hingga saat ini Tailwind CSS sudah mencapai versi 3.1.8.[5]

Perbedaan dengan kerangka kerja lain

Situs web resmi Tailwind CSS menyatakan bahwa dengan menggunakan Tailwind CSS pengguna dapat mengembangkan sebuah web modern tanpa meninggalkan file HTML ketika proses pengembangan.[6]

" Rapidly build modern websites without ever leaving your HTML "

Selain itu, perbedaan lain Tailwind CSS dengan kerangka kerja (framework) lain seperti Bootstrap yaitu Tailwind CSS merupakan Utility-First Framework, sedangkan Bootstrap adalah UI Framework.

Utilities Tailwind CSS

Utility adalah kelas HTML sederhana yang biasanya berada dalam satu scope properti CSS, seperti border-style atau background-color.[7] Berikut adalah contoh utility classes yang ada di Tailwind CSS:

Contoh: yellow notice
Hasil
Kode <syntaxhighlight lang="html">

Please be careful when feeding the birds.

</syntaxhighlight>

Classes Tailwind Vanilla CSS atau CSS polos
<syntaxhighlight lang="css" inline="1">margin: 1rem;</syntaxhighlight>
<syntaxhighlight lang="css" inline="1">padding: 1rem;</syntaxhighlight>
<syntaxhighlight lang="css" inline="1">background-color: rgba(229, 231, 235, 1);</syntaxhighlight>
<syntaxhighlight lang="css" inline="1">font-weight: 700;</syntaxhighlight>
<syntaxhighlight lang="css" inline="1">border-radius: 0.5rem;</syntaxhighlight>

Jenis-jenis

Ada banyak jenis utility class di Tailwind CSS yang memungkinkan pengguna untuk mengontrol dan melakukan kustom properti CSS sesuai dengan keinginannya, seperti warna font, ukuran font, jenis font, padding, margin, display, dan lain sebagainya.[8]

Berikut adalah beberapa daftar utilities yang terdapat pada Tailwind CSS:

  • Preflight
  • Layout
  • Tables
  • Typography
  • Effect & filters
  • Flexbox & grid
  • Spacing & sizing
  • Background & border
  • Transition, transformation & animation
  • dan lain sebagainya

Fitur-fitur

Adapun beberapa fitur-fitur unggulan yang terdapat pada Tailwind CSS adalah sebagai berikut :[9]

  • Utility-first concept
  • Interactivity
  • Responsive design
  • Dark mode
  • Reusability
  • Custom styles
  • Functions & directives

Penggunaan Tailwind CSS

Ada beberapa cara penggunaan (instalasi) Tailwind CSS berdasarkan situs web resmi Tailwind CSS. Di antaranya yaitu:[10]

  • Tailwind CLI
  • PostCSS
  • Play CDN

Contoh kode

Berikut adalah salah satu contoh penulisan kode Tailwind CSS apabila dibandingkan dengan Bootstrap dan vanilla CSS (CSS polos) :

Tailwind CSS<syntaxhighlight lang="html"> <!DOCTYPE html> <html lang="en">

<head> 

 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Page Title</title>

 <script src="https://cdn.tailwindcss.com"></script>

</head>

<body> 

 <button type="submit" class="bg-blue-600 text-white px-3 py-2 rounded hover:bg-blue-700">Submit</button>

</body>

</html> </syntaxhighlight>Bootstrap 5<syntaxhighlight lang="html"> <!DOCTYPE html> <html lang="en">

<head> 

 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Page Title</title>

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
   integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

</head>

<body> 

 <button type="submit" class="btn btn-primary">Submit</button>

</body>

</html> </syntaxhighlight>Vanilla CSS<syntaxhighlight lang="html"> <!DOCTYPE html> <html lang="en">

<head> 

 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Page Title</title>

 <style>
   .button {
     padding: 6px 12px;
     border-radius: 4px;
     background-color: #0D6eFD;
     color: white;
     border: 0;
     transition: 0.2s;
   }
 </style>

</head>

<body> 

 <button type="submit" class="button">Submit</button>

</body>

</html> </syntaxhighlight>

Versi

Berikut adalah beberapa versi Tailwind CSS hingga saat ini:

Lihat pula

Pranala luar

Referensi

  1. ↑ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. tailwindcss.com.
  2. ↑ Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development. tailwindcss-v0.netlify.app.
  3. ↑ Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs. tailwindcss.com.
  4. ↑ The Story of Tailwind CSS feat. Adam Wathan. The OfferZen Community Blog.
  5. ↑ Release Notes - Tailwind CSS. tailwindcss.com.
  6. ↑ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. tailwindcss.com.
  7. ↑ Utilities. U.S. Web Design System (USWDS). 2022-10-11.
  8. ↑ Utility-First Fundamentals - Tailwind CSS. tailwindcss.com.
  9. ↑ Installation: Tailwind CLI - Tailwind CSS. tailwindcss.com.
  10. ↑ Installation: Tailwind CLI - Tailwind CSS. tailwindcss.com.

Sumber dan atribusi

Konten artikel ini diadaptasi dari Wikipedia bahasa Indonesia, revisi 29382953 (2026-06-24T10:10:41Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Mohon gunakan konten ini secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.


Diperoleh dari "https://wiki.unissula.ac.id/index.php?title=Tailwind_CSS&oldid=2826"