Tailwind CSS

Tailwind CSS
Tipeperangkat lunak bebas, Framework CSS dan JavaScript library (en) Terjemahkan Edit nilai pada Wikidata
Versi stabil
3.4.15 (14 November 2024) Edit nilai pada Wikidata
LisensiMIT License [1]
Bahasa
Daftar bahasa

English

Karakteristik teknis
Sistem operasiLintas platform Edit nilai pada Wikidata
Bahasa pemrogramanCascading Style Sheets Edit nilai pada Wikidata
Sumber kode
Kode sumberPranala Edit nilai pada Wikidata
Informasi tambahan
Situs webtailwindcss.com
X: tailwindcss Modifica els identificadors a Wikidata
Sunting di Wikidata Sunting di Wikidata • Sunting kotak info • L • B
Info templat
Bantuan penggunaan templat ini

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]

Sejarah

Tailwind 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

Situs 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

Utility 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 FExample Tailwind yellow warning.png
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

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 & 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 :[11]

  • 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:[12]

  • 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

<!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

Berikut adalah beberapa versi Tailwind CSS hingga saat ini:

Lihat pula

Referensi

  1. ^ "Github: tailwindlabs/tailwindcss, LICENSE". 
  2. ^ "Tailwind Labs". 
  3. ^ "Release 3.4.15". 14 November 2024. Diakses tanggal 1 Desember 2024. 
  4. ^ a b "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. ^ "Release Notes - Tailwind CSS". 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

Read other articles:

Vivir un poco

Vivir un poco Serie de televisiónGénero TelenovelaCreado por Arturo Moya GrauGuion por Carlos Romero (adaptación)Jesús Calzada (coadaptación)Dirigido por Rafael Banquells (foro - primera parte)Pedro Damián (foro - segunda parte)Beatriz Sheridan (directora adjunta - segunda parte)Protagonistas Angélica AragónRogelio GuerraBeatriz SheridanIrma LozanoNuria BagesClaudio BáezCarlos AnciraAugusto BenedicoArturo PenichePatricia PereyraTema principal Vivir un poco(compuesto por Amparo Rubín...

 

Edward Gaming

Chinese esports organization based in Guangzhou Edward GamingTên ngắnEDGDivisionsCurrent: League of Legends Former: Counter-Strike: Global Offensive HearthstoneThành lậpTháng 9 năm 2013 (2013-09)GiảiLeague of Legends Pro LeagueTrụ sởThượng Hải, Trung QuốcNhà thi đấuSân vận động bóng đá Hồng KhẩuChức vô địch 1× Chung kết thế giới (2021) 1× Mid-Season Invitational (2015) Edward Gaming[a] (EDG) là một tổ chức thể thao đi...

 

Alfabet Manda

Alfabet MandaJenis aksara Alfabet BahasaManda KlasikManda BaruArah penulisanKanan ke kiriAksara terkaitSilsilahHieroglif MesirAbjad Proto-SinaiAbjad FenisiaAbjad AramAlfabet MandaISO 15924ISO 15924Mand, 140 , ​Mandaic, MandaeanPengkodean UnicodeNama UnicodeMandaicRentang UnicodeU+0840–U+085F Artikel ini mengandung transkripsi fonetik dalam Alfabet Fonetik Internasional (IPA). Untuk bantuan dalam membaca simbol IPA, lihat Bantuan:IPA. Untuk penjelasan perbedaan ...

Piala FA 1879–1880

Piala FA 1879–1880Negara InggrisJumlah peserta54Juara bertahanOld EtoniansJuaraClapham Rovers(gelar ke-1)Tempat keduaOxford University← 1878–1879 1880–1881 → Piala Challenge The Football Association 1879–1880 adalah edisi kesembilan dari penyelenggaraan Piala FA, turnamen tertua dalam sepak bola di Inggris. 54 tim mengikuti turnamen ini, di mana 5 dari 54 tim tidak memainkan satupun pertandingan. Edisi ini dimenangkan oleh Clapham Rovers setelah mengalahkan Oxford University ...

 

Hospital of St Cross

Grade I listed almshouse in Winchester, Hampshire, United Kingdom For the hospital in Warwickshire, see Hospital of St. Cross, Rugby. Hospital of St CrossThe Hospital of St CrossFoundedc. 1132–36FounderHenry of BloisLegal statusCharityPurposeAlmshouseLocationWinchester, EnglandMasterThe Reverend Dominik ChmielewskiWebsitehospitalofstcross.co.uk Listed Building – Grade IDesignated24 March 1950Reference no.1095374 The hospital and church seen from St Catherine's Hill The Hospital of St...

 

Jason Statham

English actor (born 1967) Jason StathamStatham in 2018Born (1967-07-26) 26 July 1967 (age 56)Shirebrook, Derbyshire, EnglandOccupationActorYears active1993–presentPartner(s)Rosie Huntington-Whiteley(2010–present; engaged)Children2 Jason Statham (/ˈsteɪθəm/; born 26 July 1967) is an English actor. He is known for portraying characters in various action-thriller films who are typically tough, hardboiled, gritty, or violent. Statham began practising Chinese martial arts, kickbo...

Lucknow Police

Police Department of Lucknow City Lucknow Police Commissionerateलखनऊ पुलिस आयुक्तालयLogoFlag of Uttar Pradesh PoliceAbbreviationLPMotto।। वयं रक्षणाय सेवामहे ।। SanskritAgency overviewFormed14 January 2020; 3 years ago (14 January 2020)Jurisdictional structureOperations jurisdictionMetropolitan Region, Lucknow, IndiaLucknow Police Jurisdictional AreaSize631 km2 (244 sq mi)PopulationMore T...

 

Federated Wiki

Wiki software platform Federated WikiOfficial Federated Wiki website running on the namesake applicationOriginal author(s)Ward CunninghamDeveloper(s)Ward Cunningham and GitHub contributorsInitial releaseDecember 16, 2013 (2013-12-16)Stable release0.28.0 / September 24, 2022 (2022-09-24) Repositorygithub.com/fedwiki/wiki Written inCoffeeScriptTypeWiki softwareLicenseMIT LicenseWebsitefed.wiki.org Federated Wiki (formerly Smallest Federated Wiki) is a collaborative...

 

Bánh bò

Đừng nhầm lẫn với bánh bó. Bánh bòBánh bò hấpLoạiBánhBữaTráng miệng, ăn chơiXuất xứViệt NamThành phần chínhBột gạo, đường, nấm men, nước cốt dừa Nấu ăn: Bánh bò Bánh bò nướng Bánh bò là một loại bánh có xuất xứ và phổ biến tại Việt Nam. Bánh bò là một loại bánh xốp làm từ: bột gạo, nước, đường và men. Mặt bánh có rất nhiều bong bóng nhỏ do có nhiều lỗ khí trong bánh...

Ворона джунглева

?Ворона джунглева Охоронний статус Найменший ризик (МСОП 3.1) Біологічна класифікація Домен: Еукаріоти (Eukaryota) Царство: Тварини (Animalia) Тип: Хордові (Chordata) Клас: Птахи (Aves) Ряд: Горобцеподібні (Passeriformes) Родина: Воронові (Corvidae) Рід: Крук (Corvus) Вид: Ворона джунглева Біно...

 

Address space

In computing, an address space defines a range of discrete addresses, each of which may correspond to a network host, peripheral device, disk sector, a memory cell or other logical or physical entity. For software programs to save and retrieve stored data, each datum must have an address where it can be located. The number of address spaces available depends on the underlying address structure, which is usually limited by the computer architecture being used. Often an address space in a syste...

 

The Mercury (Hobart)

Daily newspaper for Hobart and southern Tasmania For the California newspaper, see The Mercury News. For the Pennsylvania newspaper, see The Mercury (Pennsylvania). The MercuryFront page of The Mercury on 9 December 2006TypeDaily newspaperFormatTabloidOwner(s)Davies Brothers (News Corp Australia)EditorCraig HerbertFounded1854; 169 years ago (1854)HeadquartersGround floor, 2 Salamanca Square, Hobart, Tasmania, Australia, 7000Circulation44,317 (Weekdays)61,020 (Saturday)58,148...

Nicolas Frantz

Luxembourgian cyclist Nicolas FrantzPersonal informationFull nameNicolas FrantzBorn(1899-11-04)4 November 1899Mamer, LuxembourgDied8 November 1985(1985-11-08) (aged 86)Luxembourg, LuxembourgTeam informationDisciplineRoadRoleRiderProfessional teams1923Thomann1924–1934Alcyon Major wins Cyclo-cross National Championships (1923, 1924) Road Grand Tours Tour de France General classification (1927, 1928) 20 individual stages (1924–1929) Stage races Madrid–Santander (1913) One-day...

 

Connecticut Audubon Society Center at Fairfield

Connecticut Audubon Society Center at Fairfield - entrance to the Roy and Margot Larsen Wildlife Sanctuary The Connecticut Audubon Society Center at Fairfield is a nature center and wildlife sanctuary in the Greenfield Hill area of Fairfield, Connecticut. Constructed in 1971, the center features classrooms for environmental education programs, live animals on display, natural history exhibits, a nature library, a solar greenhouse and a gift shop. Outside there is a compound with non-releasabl...

 

Richard Cole (EastEnders)

Fictional character from the BBC soap opera EastEnders Soap opera character Richard ColeEastEnders characterPortrayed byIan ReddingtonDuration1992–1994First appearanceEpisode 77923 July 1992 (1992-07-23)Last appearanceEpisode 100321 July 1994 (1994-07-21)ClassificationFormer; regularCreated byTony JordanIntroduced byLeonard LewisIn-universe informationOccupationMarket Inspector Richard Cole (also known as Tricky Dicky) is a fictional ch...

Doa Yesus

Halaman ini berisi artikel tentang praktik doa yang umum digunakan dalam Gereja Timur. Untuk doa yang diajarkan Yesus, lihat Bapa Kami. Untuk doa yang diucapkan oleh Yesus, lihat Yesus berdoa. Untuk doa ... Yesus yang baik ..., lihat Doa Fatima dan Doa di depan Salib Kristus. Kristogram dengan Doa Yesus dalam bahasa Rumania: Doamne Iisuse Hristoase, Fiul lui Dumnezeu, miluieşte-mă pe mine păcătosul (Tuhan Yesus Kristus, Putera Allah, kasihanilah aku, orang berdosa) Bagian dari serial tent...

 

New York Times Building

Questa voce sugli argomenti grattacieli di New York e Manhattan è solo un abbozzo. Contribuisci a migliorarla secondo le convenzioni di Wikipedia. New York Times Buildingil New York Times BuildingLocalizzazioneStato Stati Uniti Stato federatoNew York LocalitàNew York City Indirizzo620 8th Avenue Coordinate40°45′22″N 73°59′24″W / 40.756111°N 73.99°W40.756111; -73.99Coordinate: 40°45′22″N 73°59′24″W / 40.756111°N 73.99°W40.7561...

 

Philippine Navy HDC-3100 Future Corvette

Guided missile frigates in service with the Philippines Navy Future corvette of the Philippine Navy based on HHI's HDC-3100 design Class overview Nameunnamed class BuildersHyundai Heavy Industries Operators Philippine Navy Preceded byRizal-class corvette Cost PH₱12.5 billion (~US$250M) per ship-platform (in 2021 December contract signing phase)[1] PHP1.5B (~USD30M) initial ammo per ship (not yet contracted)[1] Built2023-2026 In commission2025-2026 (expected) Planned0 Bu...

تأثير لينز-ثيرينج

تاثير انحناء الزمكان على جيروسكوب في مدار حول الأرض. تأثير لينز-ثيرينج أو بدارية لينز-ثيرينج في الفيزياء (بالإنجليزية:Lense–Thirring effect أو Lense–Thirring precession) هو تأثير طبقا للنظرية النسبية العامة سمي باسم جوزيف لينز وهانز ثيرينج يعطي تصحيحا لبدارية جيروسكوب عندا يكون في مدار حول ج...

 

Anthony Salim

Ini adalah nama Tionghoa-Indonesia, marganya adalah Liem (林) Artikel ini membutuhkan rujukan tambahan agar kualitasnya dapat dipastikan. Mohon bantu kami mengembangkan artikel ini dengan cara menambahkan rujukan ke sumber tepercaya. Pernyataan tak bersumber bisa saja dipertentangkan dan dihapus.Cari sumber: Anthony Salim – berita · surat kabar · buku · cendekiawan · JSTOR Biografi ini memerlukan lebih banyak catatan kaki untuk pemastian. Bantulah unt...

 

Strategi Solo vs Squad di Free Fire: Cara Menang Mudah!