Menentukan Posisi Absolute Untuk Pemula Menggunakan Tailwind CSS

Apa itu Tailwind CSS?

Tailwind adalah framework CSS yang mengutamakan utilitas. Berbeda dengan kerangka kerja CSS lainnya seperti Bootstrap dan Materialize CSS, ia tidak datang dengan komponen yang telah ditentukan sebelumnya. Sebagai gantinya, Tailwind CSS bekerja pada tingkat yang lebih rendah dan menyediakan satu set kelas pembantu CSS. Kelas ini memudahkan dan mempercepat pembuatan desain khusus. Tailwind CSS tidak kontroversial, jadi mari buat desain Anda sendiri.

Situs web proyek dapat ditemukan di https://tailwindcss.com/.

Menyiapkan proyek menggunakan Tailwind CSS

Sekarang mari kita mulai dengan Tailwind CSS. Untuk menginstal Tailwind CSS, mulai proyek baru dari awal. Buat folder proyek baru menggunakan perintah berikut:

$ mkdir tailwind-sample-01

Ubah ke folder yang baru dibuat itu

$ cd tailwind-sample-01

Buat file package.json baru menggunakan perintah npm sebagai berikut:

$ npm init -y

Ini memungkinkan Anda menggunakan Node.js Package Manager (NPM) untuk mengelola dependensi dalam proyek ini di langkah berikutnya.

dependensi pertama yang perlu Anda tambahkan ke proyek Anda adalah paket tailwindcss. Instal menggunakan perintah berikut:

$ npm install tailwindcss

Perintah ini memverifikasi bahwa paket tailwindcss telah diunduh dan disimpan di folder node_modules dan dependensi telah ditambahkan ke file package.json.

Langkah selanjutnya adalah menambahkan Tailwind ke CSS proyek Anda. Hal ini dilakukan dengan membuat file baru css/styles.css dan memasukkan direktif @tailwind tiga kali untuk mengimpor basis Tailwind, komponen, dan gaya utilitas.

@tailwind base;
@tailwind components;
@tailwind utilities;

Nanti, saat Anda menjalankan proses pembuatan Tailwind CSS, arahan ini akan diganti dengan kode CSS Tailwind yang sesuai.

Membuat file konfigurasi Tailwind

Untuk menyelesaikan penyiapan Tailwind, buat file konfigurasi awal di folder proyek Anda menggunakan perintah berikut:

$ npx tailwindcss init

Perintah ini membuat file baru bernama tailwind.config.js, yang berisi konten berikut:

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Membuat file ini bersifat opsional dan hanya diperlukan jika Anda ingin menggunakannya untuk menyisipkan pengaturan tambahan di sini. Nanti, saya akan menunjukkan contoh cara menggunakan file ini.

Memproses CSS dengan Tailwind

Tailwind CSS memerlukan proses build yang memproses file CSS dan memverifikasi bahwa arahan yang digunakan dan kode CSS Tailwind dimasukkan sesuai dengan konfigurasi Tailwind.

Salah satu opsi untuk menyiapkan proses build adalah menggunakan PostCSS. PostCSS adalah alat untuk mengonversi CSS dengan JavaScript. Ini berfungsi dengan plugin, sehingga Anda dapat dengan mudah melakukan langkah-langkah pemrosesan Tailwind CSS menggunakan plugin TailwindCSSPostCSS.

Selain itu, kami juga menggunakan plugin bernama autoprefixer. Plugin ini mem-parsing kode CSS dan menambahkan awalan vendor. Mari kita instal plugin PostCSS dan autoprefixer menggunakan perintah berikut.

$ npm install postcss-cli autoprefixer

Setelah menginstal paket-paket ini, mari buat file konfigurasi PostCSS di direktori proyek Anda.

$ touch postcss.config.js

Masukkan konten berikut ke dalam file baru.

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

Di sini kami menentukan bahwa proses PostCSS harus menggunakan tailwindcss dan plugin autoprefixer untuk melakukan pemrosesan CSS.

Masukkan skrip build berikut di package.json.

"build": "postcss css/styles.css -o build/styles.css"

Script ini melakukan pemrosesan PostCSS pada file css/styles.css (ini adalah file CSS dengan direktif Tailwind yang dimasukkan) dan menampilkan hasilnya ke file build/styles.css. Untuk menjalankan skrip ini, ketik:

$ npm run build

Membuat file index.html

Sejauh ini, proyek kami hanya terdiri dari file CSS. Tentu saja, Anda memerlukan file HTML untuk menyertakan kode HTML khusus dan kode CSS yang sekarang tersedia di build/styles.css.

Buat file index.html baru di folder build Anda dan masukkan kode HTML berikut sebagai titik awal.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Tailwind CSS Demo</title>
</head>
<body>
    <div class="h-64">
        <div class="p-4 m-4 bg-green-600">
            <h1 class="text-2xl font-bold text-white">Tailwind CSS Demo</h1>
        </div>
        <div class="p-4 m-4 bg-green-300 h-full">
            <h2 class="text-green-900">Have much fun using Tailwind CSS</h2>
        </div>  
    </div>
</body>
</html>

Menggunakan Live-server

Sekarang Anda siap untuk memulai server web untuk melayani proyek Anda. Gunakan Live-server yang perlu diinstal terlebih dahulu.

$ npm install -g live-server

live-server adalah server web dengan fungsi live reload. Saat server langsung berjalan, server terus-menerus memeriksa perubahan basis kode dan secara otomatis memuat ulang hasil yang ditampilkan di browser.

Gunakan perintah live-server untuk memulai server, melewati folder yang menyediakan konten.

$ live-server build

Anda kemudian dapat membuka situs web dengan menentukan URL 127.0.0.1:8080 di browser Anda. Hasilnya ditampilkan sebagai berikut.

Komponen yang menggunakan Tailwind CSS

Tidak seperti framework CSS lainnya seperti Bootstrap dan Materialize CSS, Tailwind tidak dilengkapi dengan komponen yang telah ditentukan sebelumnya seperti button, Notification Bar, dan card. Berikut ini, Anda akan mempelajari cara menggunakan kelas utilitas Tailwind CSS untuk menata gaya komponen tersebut.

Cara menata komponen button

Pertama, mari kita atur gaya button.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">My Tailwind Button</button>

Kelas utilitas berikut berlaku:

• bg-blue-500: Gunakan warna biru sebagai warna latar belakang button
• hover: bg-blue-700: Ubah warna biru saat mengarahkan kursor ke button
• text-white: Menampilkan teks button berwarna putih
• font-bold: gunakan font tebal
• py-2: tetapkan padding 0,5rem ke bawah dan atas
• px-4: Tetapkan padding 1rem ke kiri dan kanan
• Rounded: Mengatur gaya button dengan sudut membulat

Hasilnya adalah sebagai berikut:

Cara menata komponen Notification Bar

Mari kita ambil contoh lain, menata komponen Notification Bar menggunakan kelas utilitas Tailwind CSS.

<div class="bg-blue-900 text-center py-4 lg:px-4">
    <div class="p-2 bg-blue-800 items-center text-blue-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
        <span class="flex rounded-full bg-blue-500 uppercase font-bold px-2 py-1 text-xs mr-3">New</span>
        <span class="font-semibold mr-2 text-left flex-auto">Use Tailwind CSS to implement your own unique design!</span>
    </div>
</div>

Notification Bar terdiri dari latar belakang biru tua (bg-blue-900), teks pusat (text-center), dan bagian div eksternal yang memberikan padding ke atas dan bawah 1rem menggunakan kelas utilitas.(Py-4) digunakan Untuk layar yang lebih besar dan lebih tinggi, lebih banyak padding kiri dan kanan ditentukan.

Di dalam div luar adalah elemen div dalam yang menggunakan kelas utilitas Tailwind berikut:

• p-2: Menambahkan bantalan 0,5rem
• bg-blue-800: Tetapkan warna latar belakang biru
• item-center: Melenturkan item di sepanjang sumbu persimpangan wadah
• text-blue-100: Menampilkan teks dengan warna biru muda
• Leading-none: Mengatur tinggi baris elemen ke 1.
• lg: rounded-full: Untuk layar besar, tetapkan elemen radius batas 9999px
• Flex: Terapkan tata letak fleksibel ke wadah
• lg: inline-flex: Tata letak fleksibel inline digunakan pada layar besar ke atas

Di dalam elemen div dalam ada dua elemen rentang yang digunakan untuk tujuan berikut:

• Tampilkan elemen lencana dengan teks BARU di depan teks notifikasi
• Tampilkan teks pemberitahuan

Penataan gaya yang diterapkan di sini dibuat menggunakan kelas utilitas berikut:

• Flex: Terapkan tata letak fleksibel ke wadah
• Rounded-full: Menetapkan elemen radius batas 9999px
• bg-blue-500: Tetapkan warna latar belakang biru
• Huruf besar: Menampilkan teks dalam huruf besar saja
• font-bold: Menampilkan teks dalam font tebal (ketebalan font 700)
• px-2: Tetapkan bantalan 0,5rem ke kiri dan kanan wadah
• py-1: Tetapkan bantalan 0,25rem ke bawah dan atas
• text-xs: Menampilkan teks dengan ukuran font 0.75rem
• mr-3: Alokasikan margin di sebelah kanan 0.75rem

Kelas utilitas yang diterapkan ke elemen rentang kedua yang digunakan untuk menampilkan teks notifikasi:

• font-semibold: Menampilkan teks dengan berat font 600
• mr-2: Alokasikan margin di sebelah kanan 0,5rem
• text-left: Mengatur perataan teks ke kiri
• flex-auto: Memungkinkan item fleksibel untuk ditingkatkan dan diturunkan dengan mempertimbangkan ukuran awal

Hasil yang ditampilkan di browser terlihat seperti ini di layar lebar:

Untuk layar yang lebih kecil, hasilnya terlihat seperti ini:

Cara menata komponen card

Terakhir, mari kita lihat cara menggunakan kelas utilitas Tailwind untuk menata komponen card.

<div class="pt-5">
    <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
        <img src="/img/title.png" alt="Tailwind CSS For Absolute Beginners" class="w-full">
        <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">Tailwind CSS For Absolute Beginners</div>
            <p class="text-grey-700 text-base">
                Tailwind is a utility-first CSS framework. In contrast to other CSS frameworks like Bootstrap or Materialize CSS it doesn’t come with predefined components. Instead Tailwind CSS operates on a lower level and provides you with a set of CSS helper classes. By using this classes you can rapidly create custom design with ease. Tailwind CSS is not opinionated and let’s you create you own unique design.
            </p>
        </div>
        <div class="px-6 py-4">
            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tailwindcss</span>
            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#css</span>
            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#webdevelopment</span>
        </div>
    </div>
</div>

Sekali lagi, saya menggunakan beberapa kelas utilitas Tailwind CSS untuk menata komponen card, yang terdiri dari:

• Gambar ditampilkan di atas
• Teks judul
• Teks deskriptif
• badges containing hashtags

Mengekstrak komponen

Tailwind CSS menyediakan sekumpulan besar kelas utilitas CSS untuk membantu Anda menerapkan gaya dengan cepat dan mudah menerapkan desain khusus Anda.

Namun, saat proyek Anda berkembang, Anda mungkin akan mengulangi kumpulan kelas utilitas yang sama berulang-ulang (misalnya, menata beberapa button). Ini juga semakin sulit untuk memastikan bahwa semua elemen yang membutuhkan gaya yang sama sinkron.

Untuk mengatasi masalah ini, Tailwind dapat menggunakan direktif @apply di css/styles.css untuk mengekstrak komponen CSS.

@tailwind base;@tailwind components;.btn-blue {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
    @apply bg-blue-700;
}@tailwind utilities;

Di sini Anda dapat melihat bahwa kelas CSS btn-blue didefinisikan menggunakan direktif @apply. Sangat penting untuk menempatkan kode CSS tambahan ini tepat setelah komponen @tailwind. Sebelum pernyataan dan utilitas @tailwind. penyataan.

Untuk mengubah kode di css/styles.css, Anda perlu menjalankan proses build lagi.

$npm menjalankan build

Ini akan membuat kelas CSS baru btn-blue bagian dari kode CSS yang dihasilkan oleh build/styles.css dan tersedia di index.html.

<button class="btn-blue">My Tailwind Button</button>

button yang dihasilkan akan terlihat seperti button yang Anda lihat sebelumnya.

Menggunakan file konfigurasi Tailwind

Cara lain untuk menentukan komponen adalah dengan menggunakan file konfigurasi tailwind.config.js yang dibuat sebelumnya. Di sini Anda dapat membuat komponen Anda sendiri yang mendefinisikan kelas CSS baru dengan cara berikut:

const plugin = require('tailwindcss/plugin')module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
    plugin(function({ addComponents }){
      const buttons = {
        '.btn-red': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
          backgroundColor: '#e3342f',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#cc1f1a'
          }
        }
      }
      
      addComponents(buttons)
    })
  ],
}

Setelah membuat perubahan pada file konfigurasi ini, Anda harus menjalankan proses pembuatan CSS lagi.

$ npm run build

Anda sekarang dapat menggunakan kelas CSS baru btn-red dalam kode HTML Anda.

Akibatnya, Anda akan melihat button merah.

Kesimpulan

Tailwind CSS memperkenalkan cara lain kerangka kerja CSS bekerja. Ini menyediakan satu set kelas utilitas yang dapat Anda gunakan untuk dengan mudah membuat desain kustom Anda sendiri.

Tailwind CSS tidak kontroversial, jadi Anda memiliki kebebasan penuh dalam memilih desain elemen dan komponen situs web Anda.

Artikel Lainnya :

• Menentukan Bahasa Yang Menjanjikan Untuk Web Developers (JavaScript Atau Python)
• Cara Menghasilkan Uang dengan Scraping Web Menggunakan Python
• 10 Skrip Python Untuk Mengotomatisasi Tugas Anda Sehari-hari

Share this post