Membuat Gradient pada TailwindCSS

KuReview – Salah satu yang saya sukai dari TailwindCSS adalah kemudahannya dalam custom komponen maupun menambahkan berbagai jenis setup sehingga memudahkan saya dalam membuat komponen, tanpa harus re-write ulang css pada sebuah komponen.

Sebelumnya, saya sudah pernah membuat artikel tentang setup / init proyek dengan menggunakan TailwindCSS. Sepemahaman saya sekarang, Tailwind tidak mendukung secara default untuk membuat gradient. Sehingga kita perlu untuk install terlebih dahulu sebuah plugins untuk membuat gradient.

Install Plugins Gradients

npm i tailwindcss-plugins -D

Setup Config TailwindCSS

Pada file tailwind.config.js tambahkan ‘variants’ dan ‘plugins’, dibawah ‘themes’ sehingga hasilnya sebagai berikut :

module.exports = {
  theme: {
   ...
// Code themes setup
  },

  variants: {
// gradient agar bisa responsive dan hover
    gradients: ['responsive', 'hover'],
  },
  plugins: [
//menambahkan plugins gradients
    require('tailwindcss-plugins/gradients'),
  ],
}

Tambahkan Gradients

Nah baru pada Theme, kita akan menambahkan gradient- gradient yang bisa kita implementasikan. Secara default, gradientnya adalah liniear gradient.

Hasil Akhir

Nah, sehingga pada file tailwind.config.js kita akan menghasilkan seperti ini :

atau versi yang bisa di copy-paste seperti ini :

module.exports = {
  theme: {
    gradients: theme => ({
      // Array definition (defaults to linear gradients).
      'shihan': ['237.76deg', '#01A8E2 -25.01%', '#0066B3 59.76%'],
      'shihan-second': ['225.83deg', '#01A8E2 4.14%', '#0066B3 70.94%'],
      'gradient-gray': ['222.61deg', '#F8F8F8 16.72%', '#EDEDED 106.23%'],
      // Gradient Card
      'blueDark-light': ['209.3deg', '#138EEA 12.1%', '#0066B3 83.53%'],
      'blueDark-dark': ['212.79deg', '#0B3DED 11.9%', '#0027B3 94.86%'],
      'purpleDark-light': ['216.68deg', '#A70AF1 12.15%', '#7A00B3 96.72%'],
      'pinkDark-light': ['221.67deg', '#F209BF 9.57%', '#B3008C 100%'],
      // Object definition.
      'mono-circle': {
        type: 'radial',
        colors: ['circle', '#CCC', '#000']
      },
    }),
  },
  variants: {
    gradients: ['responsive', 'hover'],
    padding: ['responsive']
  },
  plugins: [
    require('tailwindcss-plugins/gradients'),
  ],
}

Dokumentasi lebih lengkap mengenai plugin ini, bisa dilihat pada file Github Lorisleiva. Semoga bermanfaat ya! Jangan lupa dukung saya di Karyakarsa.

https://karyakarsa.com/naufaldisatriya
https://karyakarsa.com/naufaldisatriya

Leave a Reply

Your email address will not be published. Required fields are marked *