Mempelajari Tailwind CSS

Perkenalan tailwind CSS

     Apa itu tailwind css! tailwind css dibuat oleh Adam Wathan, seorang yang cukup terkenal di komunitas laravel dengan beberapa coursenya. Kali ini dia menawarkan konsep baru yang berbeda dari bootstrap, bulma, atau css framework lainnya lewat Tailwind css.

ketika kita menggunakan tailwindcss, kita berasa sedang bekerja dengan css secara langsung namun menggunakan class yang reusable.

Kelebihannya TilwindCss yaitu kita bisa melakukan desain website kita dengan lebih custom dan bebas, tidak perlu khawatir apakah framework css kita sudah menyediakan atau belum.

perbandingan tailwind sendiri dibandingkan cara lama (penamaan kelas yang spesifik) . Contoh membuat elemen notifikasi chat.

Contoh nama kelas spesifik:

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="blablabla Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">Bla bla bla</h4>
    <p class="chat-notification-message">Pesan kamu....!</p>
  </div>
</div><style>
  .chat-notification {
    display: flex;
    max-width: 30rem;
    margin: 0 auto;
    padding: 2.5rem;
    border-radius: 1.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Dengan tailwind

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">bla bla bla</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

BERIKUT CARA INSTALL TAILWND CSS

Install Tailwind CSS pada React menggunakan CRA

Jalankan perintah berikut pada terminal untuk membuat sebuah Create React App project:

npx create-react-app my-app
cd my-app

Install tailwindcss:

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Selain package tailwindcss kita juga menginstal beberapa package lain seperti @tailwindcss/postcss7-compat @tailwindcss/postcss7-compat , hal ini dikarenakan CRA tidak support PostCSS dan kita harus menginstall package tambahan agar tailwindcss bisa diinstall sebagai PostCSS plugin.

Kemudian install package craco agar kita bisa mengubah konfigurasi dari PostCSS.

npm install @craco/craco

Update file package.json pada bagian scripts, ganti react-scripts:

{
    // ...
    "scripts": {
-     "start": "react-scripts start",
-     "build": "react-scripts build",
-     "test": "react-scripts test",
+     "start": "craco start",
+     "build": "craco build",
+     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

Kemudian buat file konfigurasi craco dengan nama craco.config.js di root folder, tambahkan tailwindcss dan autoprefixer sebagai plugin PostCSS.

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

Buat sebuah file konfigurasi untuk tailwindcss dengan nama tailwind.config.js di root folder, dan salin konfigurasi berikut:

module.exports = {
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false,
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Langkah berikutnya adalah menambahkan tailwindcss ke file CSS.

Buka file src/index.css, ganti isi dari file tersebut

Dari:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Menjadi:

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

Kemudian jalankan perintah npm start untuk menjalankan aplikasi.

Konsep Dasar

Kita akan bahas beberapa konsep dasar pada tailwindcss. Tidak semuanya, tapi dengan memahami konsep ini kamu sudah bisa mulai menggunakan tailwindcss.

Utility First

Seperti yang sudah disebutkan sebelumnya, bahwa tailwindcss menggunakan utility class atau helper class seperti bg-purple-500 untuk membuat custom desain menggantikan CSS.

Kita lihat code sebelumnya:

<button class="bg-purple-500 text-white 
   py-1 px-4 
   border rounded hover:bg-purple-800">Klik Disini</button>

Utility class yang ada pada code diatas:

• Class-class di atas mewakili property dan value sendiri.

  • bg-blue-500 merepresentasikan property background-color: #4299e1;
  • text-white merepresentasikan property color: #fff;
  • font-bold merepresentasikan property font-weight: 700;
  • py-2 maksudnya padding-y atau padding-vertical merepresentasikan property padding-top: 0.5rem; dan padding-bottom: 0.5rem;
  • px-4 maksudnya padding-x atau padding-horizontal merepresentasikan property padding-left: 1rem; dan padding-right: 1rem;
  • rounded merepresentasikan border-radius: .25rem;