Working with Colors and Typography in Tailwind CSS

Working with Colors and Typography in Tailwind CSS – Hi bret saya akan melanjutkan materi belajar tailwind css, di materi kali ini yaitu membahas tentang Cara menggunakan color di Tailwind CSS, Cara menyesuaikan typography dengan Tailwind CSS dan Cara membuat estetika visual yang keren menarik.

mari kita ulas materi tentang Colors and Typography in Tailwind CSS ini 🙂

1. Cara menggunakan color di Tailwind CSS

Cara menggunakan color di Tailwind CSS, yang pertama yaitu pastikan sudah menginstal dan menambahkan Tailwind CSS ke project website kesayangan kalian.

1. Untuk menggunakan warna bawaan Tailwind, gunakan class yang sudah disediakan. Contoh:

<!-- Warna background biru -->
<div class="bg-blue-500">...</div>

<!-- Warna teks merah -->
<p class="text-red-600">...</p>

2. Jika ingin menggunakan warna kustom, kalian dapat menambahkan warna ke konfigurasi Tailwind. Buka file tailwind.config.js dan tambahkan warna di dalam objek theme.colors. Contoh:

module.exports = {
  theme: {
    extend: {
      colors: {
        colorku: '#ff69b4',
      },
    },
  },
  variants: {},
  plugins: [],
}

3. Setelah warna ditambahkan ke konfigurasi, kalian dapat menggunakannya di class Tailwind. Contoh:

<!-- Warna background colorku -->
<div class="bg-colorku">...</div>

<!-- Warna teks colorku -->
<p class="text-colorku">...</p>

Dan itulah cara menggunakan color di Tailwind CSS semoga bisa membantu kepusingan kalian 😀 .

2. Cara menyesuaikan typography dengan Tailwind CSS

Untuk menyesuaikan kebutuhan typography (ukuran, line-height, font-family, dll.) dengan Tailwind CSS, kalian dapat menggunakan class yang sudah disediakan Tailwind atau menambahkan custom class sendiri.

Berikut adalah beberapa contoh class yang dapat kalian gunakan untuk menyesuaikan typography dengan Tailwind CSS:

1. Ukuran font

<!-- Ukuran font 20px -->
<div class="text-2xl">...</div>

<!-- Ukuran font kustom 24px -->
<div class="text-custom-font-size">...</div>

2. Line-height

<!-- Line-height 1.5 -->
<div class="leading-1.5">...</div>

<!-- Line-height kustom 1.8 -->
<div class="leading-custom-line-height">...</div>

3. Font-family

<!-- Font-family sans-serif -->
<div class="font-sans">...</div>

<!-- Font-family kustom -->
<div class="font-custom">...</div>

4. Teks warna

<!-- Teks warna merah -->
<div class="text-red-500">...</div>

<!-- Teks warna kustom -->
<div class="text-custom-color">...</div>

Kalian juga dapat menambahkan custom class sendiri di file tailwind.css atau tailwind.config.js. Misalnya:

@tailwind base;
@tailwind components;

@tailwind utilities {
  .text-custom-font-size {
    font-size: 24px;
  }

  .leading-custom-line-height {
    line-height: 1.8;
  }

  .font-custom {
    font-family: 'Open Sans', sans-serif;
  }

  .text-custom-color {
    color: #FFA500;
  }
}

Dengan menggunakan class bawaan atau menambahkan custom class, kalian dapat menghasilkan tampilan typography yang sesuai dengan kebutuhan project masing-masing.

3. Cara membuat estetika visual yang keren menarik

Cara membuat estetika visual yang keren dan menarik di Tailwind CSS, kalian dapat menggunakan kombinasi class bawaan dan menambahkan custom class sesuai kebutuhan kalian. Berikut adalah beberapa tips yang dapat membantu membuat estetika visual yang menarik dengan Tailwind CSS:

1. Pilih palet warna yang tepat
   • Gunakan class warna yang sudah disediakan oleh Tailwind CSS seperti text-blue-500 atau bg-red-600.
   • Gunakan class untuk membuat gradient warna seperti bg-gradient-to-r untuk membuat gradient horizontal atau bg-gradient-to-b untuk membuat gradient vertikal.
2. Gunakan tipografi yang tepat
   • Gunakan class untuk ukuran font seperti text-2xl untuk font ukuran besar atau text-sm untuk ukuran kecil.
   • Gunakan class untuk font-family seperti font-sans untuk font sans-serif atau font-serif untuk font serif.
3. Buat layout yang menarik
   • Gunakan class untuk membuat grid layout seperti grid-cols-2 untuk membuat layout 2 kolom atau grid-rows-2 untuk membuat layout 2 baris.
   • Gunakan class untuk membuat layout responsif seperti sm:flex untuk menampilkan elemen pada layar kecil atau md:hidden untuk menyembunyikan elemen pada layar besar.
4. Gunakan gambar dan grafik
   • Gunakan class untuk menambahkan gambar seperti w-full untuk membuat gambar mengisi seluruh lebar elemen atau h-64 untuk membuat gambar tinggi 64 piksel.
   • Gunakan class untuk membuat grafik seperti rounded-full untuk membuat bentuk lingkaran pada elemen atau shadow-lg untuk memberikan bayangan pada elemen.
5. Konsistensi
   • Gunakan class yang konsisten pada setiap halaman atau tampilan.
   • Gunakan class yang sama pada elemen yang serupa, seperti warna dan tipografi, untuk mempertahankan branding yang konsisten.

Ketika membuat estetika visual yang keren dan menarik dengan Tailwind CSS, pastikan untuk menggunakan class yang benar untuk memudahkan pembacaan dan mencapai tujuan desain kalian. Selalu perhatikan dan tes desain kalian pada pengguna agar desain kalian dapat dinikmati oleh khalayak ramai.

Dokumentasinya sendiri sudah ada materi tentang Colors and Typography in Tailwind CSS kalian bisa baca langsung di websitenya.

Demikian artikel tentang Working with Colors and Typography in Tailwind CS. semoga membantu aktifitas ngoding kalian. 🙂

Baca Juga :

1. Introduction to Tailwind CSS

2. Setting up Tailwind CSS

3. Basic concepts of Tailwind CSS

4. Understanding the Grid System

5. Working with Colors and Typography