Tailwind CSS Versi 3.3 Makin Mantap

Pada tanggal 28 maret, Tailwind css resmi merilis versi terbaru nya yaitu v3.3. Yang mana versi ini sama sekali tidak ada breaking changes, melainkan ada beberapa tambahan yang mungkin Anda sendiri juga menginginkan nya.

Color Palette 950

Sebelumnya, untuk color palette hanya ada 50-900, namun sekarang sudah ada tambahan baru yaitu 950, sehingga sekarang sudah menjadi 50-950. Penambahan ini berlaku untuk semua warna tanpa terkecuali.

1<main class="min-h-screen flex items-center justify-center p-24 bg-slate-700">
2    <div class="grid-cols-3 max-w-2xl w-full grid gap-4 font-mono">
3        <div class="text-white border-slate-600 bg-slate-800 ...">
4            <div>bg-slate-800</div>
5            <span class="text-slate-400 text-sm">#1e293b</span>
6        </div>
7        <div class="text-white border-slate-600 bg-slate-900 ...">
8            <div>bg-slate-900</div>
9            <span class="text-slate-400 text-sm">#0f172a</span>
10        </div>
11        <div class="text-white border-slate-600 bg-slate-950 ...">
12            <div>bg-slate-950</div>
13            <div class="text-slate-400 text-sm">#020617</div>
14        </div>
15    </div>
16</main>
17
bashCopy

Berikut adalah hasil dari kode di atas.

Support untuk ESM dan TypeScript

Sekarang kita bisa mengkonfigurasi tailwindcss mau itu dalam ESM atau pun Typescript.

Berikut adalah model untuk ESM:

1/** @type {import('tailwindcss').Config} */
2export default {
3  	content: [],
4  	theme: {
5      	extend: {},
6  	},
7    plugins: [],
8};
9
tsCopy

Dan yang ini untuk typescript:

1import type { Config } from 'tailwindcss'
2
3export default {
4    content: [],
5    theme: {
6        extend: {},
7    },
8    plugins: [],
9} satisfies Config
10
tsCopy

Jadi, ketika kita jalankan npx tailwindcss init, maka harusnya dia akan langsung paham untuk membuat yang mana, artinya dia akan mendeteksi apakah kita sedang dalam ESM, ataupun typescript.

Apakah bisa secara explicit, tentunya dong. Anda bisa jalankan npx tailwindcss init --esm atau npx tailwindcss init --ts.

Posisi Tune Gradient

Berdasarkan survey, ini adalah permintaan terbanyak dari para designer, yaitu bisa menentukan posisi stop gradient nya.

1<div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ...">
2 		<!-- ... -->
3</div>
4
htmlCopy

Atau Anda bisa juga menggunakan yang namanya arbitrary values seperti:

Atau Anda bisa juga menggunakan arbitrary values untuk menentukan sesuai keinginan Anda.

1<div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ...">
2 		<!-- ... -->
3</div>
4
htmlCopy

Line-clamp by Default

Dulu sebelum versi ini muncul, kita harus memakai official package dari tailwind yaitu @tailwindcss/line-clamp. Namun sekarang ini tidak perlu lagi, karena jika Anda install tailwind v3.3, maka line clamp akan sudah di sisipkan by default.

Apa yang saya tulis di atas, adalah bagian yang paling sering kita gunakan sehari-hari. Sehingga jika Anda ingin tahu lebih lanjut lagi, bisa langsung disini.

Semoga artikel ini bermanfaat. Saya Irsyad, see you soon.