www.wikidata.id-id.nina.az

Tailwind CSS adalah kerangka kerja framework CSS yang di dalamnya terdapat sekumpulan utility classes untuk membangun an

Tailwind CSS

Tailwind CSS adalah 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, 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
Tipeperangkat lunak bebas, Framework CSS dan JavaScript library
Versi stabil
3.4.3 (27 Maret 2024)
LisensiMIT License 
Bahasa
Daftar bahasa

English

Sumber kode
Informasi tambahan
Situs webtailwindcss.com
Sunting di Wikidata  • Sunting kotak info • L • B
Bantuan penggunaan templat ini

Sejarah sunting

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

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

Perbedaan dengan kerangka kerja lain sunting

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

" 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 sunting

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:

Contoh: yellow notice
Hasil
Kode 
<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg"> <p>Please be careful when feeding the birds.</p> </div>
Classes Tailwind Vanilla CSS atau CSS polos
m-4 margin: 1rem;
p-4 padding: 1rem;
bg-yellow-200 background-color: rgba(229, 231, 235, 1);
font-bold font-weight: 700;
rounded-lg border-radius: 0.5rem;

Jenis-jenis sunting

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.

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 sunting

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

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

Penggunaan Tailwind CSS sunting

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

  • Tailwind CLI
  • PostCSS
  • Play CDN

Contoh kode sunting

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

Tailwind CSS

<!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> <!-- Tailwind CSS CDN --> <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>

Bootstrap 5

<!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> <!-- Bootstrap5 CDN links --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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>

Vanilla CSS

<!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> <!-- di bawah adalah kode CSS --> <style>  .button {  padding: 6px 12px;  border-radius: 4px;  background-color: #0D6eFD;  color: white;  border: 0;  transition: 0.2s;  }  </style> <!-- di atas adalah kode CSS --> </head> <body> <button type="submit" class="button">Submit</button> </body> </html>

Versi sunting

Berikut adalah beberapa versi Tailwind CSS hingga saat ini:

Lihat pula sunting

Referensi sunting

  1. "Github: tailwindlabs/tailwindcss, LICENSE". 
  2. "Tailwind Labs". 
  3. "Release 3.4.3". 27 Maret 2024. Diakses tanggal 20 April 2024. 
  4. ^ "Tailwind CSS - Rapidly build modern websites without ever leaving your HTML". tailwindcss.com (dalam bahasa Inggris). Diakses tanggal 2022-10-19. 
  5. "Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development". tailwindcss-v0.netlify.app (dalam bahasa Inggris). Diakses tanggal 2022-10-19. 
  6. "Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs". tailwindcss.com (dalam bahasa Inggris). Diakses tanggal 2022-10-19. 
  7. "The Story of Tailwind CSS feat. Adam Wathan". The OfferZen Community Blog. Diakses tanggal 2022-10-19. 
  8. . tailwindcss.com (dalam bahasa Inggris). Diarsipkan dari versi asli tanggal 2020-11-06. Diakses tanggal 2022-10-19. 
  9. "Utilities". U.S. Web Design System (USWDS) (dalam bahasa Inggris). 2022-10-11. Diakses tanggal 2022-10-19. 
  10. "Utility-First Fundamentals - Tailwind CSS". tailwindcss.com (dalam bahasa Inggris). Diakses tanggal 2022-10-19. 
  11. "Installation: Tailwind CLI - Tailwind CSS". tailwindcss.com (dalam bahasa Inggris). Diakses tanggal 2022-10-19. 
  12. "Installation: Tailwind CLI - Tailwind CSS". tailwindcss.com (dalam bahasa Inggris). Diakses tanggal 2022-10-19. 

Pranala luar sunting

wikipedia, wiki, buku, buku, perpustakaan, artikel, baca, unduh, gratis, unduh gratis, mp3, video, mp4, 3gp, jpg, jpeg, gif, png, gambar, musik, lagu, film, buku, permainan, permainan.
Tanggal penerbitan:
Tailwind CSS adalah kerangka kerja framework CSS yang di dalamnya terdapat sekumpulan utility classes untuk membangun antarmuka kustom dengan cepat 4 Tailwind CSS berbeda dengan kerangka kerja CSS seperti Bootstrap Bulma atau Foundation karena Tailwind CSS bukan sebuah UI Framework 5 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 6 Tailwind CSSTipeperangkat lunak bebas Framework CSS dan JavaScript libraryVersi stabil3 4 3 27 Maret 2024 LisensiMIT License 1 BahasaDaftar bahasaEnglishKarakteristik teknisSistem operasiLintas platformBahasa pemrogramanCascading Style SheetsSumber kodeKode sumberPranalaInformasi tambahanSitus webtailwindcss comSunting di Wikidata Sunting kotak info L BBantuan penggunaan templat ini Daftar isi 1 Sejarah 2 Perbedaan dengan kerangka kerja lain 3 Utilities Tailwind CSS 3 1 Jenis jenis 4 Fitur fitur 5 Penggunaan Tailwind CSS 6 Contoh kode 7 Versi 8 Lihat pula 9 Referensi 10 Pranala luarSejarah suntingTailwind CSS dibuat oleh Adam Wathan sekarang menjabat sebagai CEO Tailwind Labs dan rekannya yang bernama Steve Schoger 7 Versi alpha Tailwind CSS resmi dirilis pada tanggal 1 November 2017 dan hingga saat ini Tailwind CSS sudah mencapai versi 3 1 8 8 Perbedaan dengan kerangka kerja lain suntingSitus web resmi Tailwind CSS menyatakan bahwa dengan menggunakan Tailwind CSS pengguna dapat mengembangkan sebuah web modern tanpa meninggalkan file HTML ketika proses pengembangan 4 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 suntingUtility adalah kelas HTML sederhana yang biasanya berada dalam satu scope properti CSS seperti border style atau background color 9 Berikut adalah contoh utility classes yang ada di Tailwind CSS Contoh yellow notice Hasil nbsp Kode lt div class m 4 p 4 bg yellow 200 font bold rounded lg gt lt p gt Please be careful when feeding the birds lt p gt lt div gt Classes Tailwind Vanilla CSS atau CSS polos m 4 span class nt margin span span class o span span class w span span class nt 1rem span span class o span p 4 span class nt padding span span class o span span class w span span class nt 1rem span span class o span bg yellow 200 span class nt background color span span class o span span class w span span class nt rgba span span class o span span class nt 229 span span class o span span class w span span class nt 231 span span class o span span class w span span class nt 235 span span class o span span class w span span class nt 1 span span class o span font bold span class nt font weight span span class o span span class w span span class nt 700 span span class o span rounded lg span class nt border radius span span class o span span class w span span class nt 0 span span class p span span class nc 5rem span span class o span Jenis jenis sunting 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 10 Berikut adalah beberapa daftar utilities yang terdapat pada Tailwind CSS Preflight Layout Tables Typography Effect amp filters Flexbox amp grid Spacing amp sizing Background amp border Transition transformation amp animation dan lain sebagainyaFitur fitur suntingAdapun beberapa fitur fitur unggulan yang terdapat pada Tailwind CSS adalah sebagai berikut 11 Utility first concept Interactivity Responsive design Dark mode Reusability Custom styles Functions amp directivesPenggunaan Tailwind CSS suntingAda beberapa cara penggunaan instalasi Tailwind CSS berdasarkan situs web resmi Tailwind CSS Di antaranya yaitu 12 Tailwind CLI PostCSS Play CDNContoh kode suntingBerikut adalah salah satu contoh penulisan kode Tailwind CSS apabila dibandingkan dengan Bootstrap dan vanilla CSS CSS polos Tailwind CSS lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset UTF 8 gt lt meta http equiv X UA Compatible content IE edge gt lt meta name viewport content width device width initial scale 1 0 gt lt title gt Page Title lt title gt lt Tailwind CSS CDN gt lt script src https cdn tailwindcss com gt lt script gt lt head gt lt body gt lt button type submit class bg blue 600 text white px 3 py 2 rounded hover bg blue 700 gt Submit lt button gt lt body gt lt html gt Bootstrap 5 lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset UTF 8 gt lt meta http equiv X UA Compatible content IE edge gt lt meta name viewport content width device width initial scale 1 0 gt lt title gt Page Title lt title gt lt Bootstrap5 CDN links gt lt link href https cdn jsdelivr net npm bootstrap 5 2 2 dist css bootstrap min css rel stylesheet integrity sha384 Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF et3URy9Bv1WTRi crossorigin anonymous gt lt head gt lt body gt lt button type submit class btn btn primary gt Submit lt button gt lt body gt lt html gt Vanilla CSS lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset UTF 8 gt lt meta http equiv X UA Compatible content IE edge gt lt meta name viewport content width device width initial scale 1 0 gt lt title gt Page Title lt title gt lt di bawah adalah kode CSS gt lt style gt button padding 6 px 12 px border radius 4 px background color 0D6eFD color white border 0 transition 0 2 s lt style gt lt di atas adalah kode CSS gt lt head gt lt body gt lt button type submit class button gt Submit lt button gt lt body gt lt html gt Versi suntingBerikut adalah beberapa versi Tailwind CSS hingga saat ini Versi v0 7 4 Versi v1 9 6 Versi v2 219 Versi v3 1 8 versi saat ini Lihat pula suntingBootstrap CSS HTML CSS JavaScript Situs Web Desain web responsif NPMReferensi sunting Github tailwindlabs tailwindcss LICENSE Tailwind Labs Release 3 4 3 27 Maret 2024 Diakses tanggal 20 April 2024 a b Tailwind CSS Rapidly build modern websites without ever leaving your HTML tailwindcss com dalam bahasa Inggris Diakses tanggal 2022 10 19 Tailwind CSS A Utility First CSS Framework for Rapid UI Development tailwindcss v0 netlify app dalam bahasa Inggris Diakses tanggal 2022 10 19 Tailwind CSS A Utility First CSS Framework for Rapidly Building Custom Designs tailwindcss com dalam bahasa Inggris Diakses tanggal 2022 10 19 The Story of Tailwind CSS feat Adam Wathan The OfferZen Community Blog Diakses tanggal 2022 10 19 Release Notes Tailwind CSS tailwindcss com dalam bahasa Inggris Diarsipkan dari versi asli tanggal 2020 11 06 Diakses tanggal 2022 10 19 Utilities U S Web Design System USWDS dalam bahasa Inggris 2022 10 11 Diakses tanggal 2022 10 19 Utility First Fundamentals Tailwind CSS tailwindcss com dalam bahasa Inggris Diakses tanggal 2022 10 19 Installation Tailwind CLI Tailwind CSS tailwindcss com dalam bahasa Inggris Diakses tanggal 2022 10 19 Installation Tailwind CLI Tailwind CSS tailwindcss com dalam bahasa Inggris Diakses tanggal 2022 10 19 Pranala luar suntingRepository github Tailwind CSS Diperoleh dari https id wikipedia org w index php title Tailwind CSS amp oldid 22542015