Menyiapkan Tailwind CSS Dalam Proyek Bereaksi

Dalam dispensasi pustaka dan kerangka kerja CSS, banyak pustaka mengagumkan telah dibangun untuk menyederhanakan pekerjaan pengembang dalam upaya menciptakan antarmuka yang intuitif. Namun, cukup banyak dari mereka (Bootstrap, Foundation) memaksakan keputusan desain yang sulit untuk dibatalkan; mereka datang dengan komponen yang telah ditentukan, oleh karena itu, menghilangkan kebutuhan untuk kustomisasi dinamis. Inilah alasan mengapa Tailwind CSS dianggap sebagai pilihan yang baik untuk membangun antarmuka web abad ke-21.

Dengan Tailwind CSS, Anda dapat membuat komponen yang sesuai dengan apa yang Anda inginkan atau sedang Anda kerjakan. Komponen-komponen ini dapat dibuat dengan memanfaatkan kekuatan utilitas Tailwind CSS yang mengutamakan utilitas. Jika Anda bosan menggunakan Bootstrap dan sejenisnya, Anda akan menemukan Tailwind CSS cocok untuk bekerja pada antarmuka yang indah saat Anda mengimplementasikan desain yang Anda butuhkan menggunakan kelas utilitas yang disediakannya.

Dalam tutorial ini, Anda akan mempelajari apa itu Tailwind CSS dan bagaimana cara menggunakannya. Pada akhirnya, Anda akan membuat kartu profil yang menggunakan kelas utilitas Tailwind CSS. Setelah itu, Anda dapat melanjutkan untuk membangun situs web portofolio yang menunjukkan keahlian Anda dan hal-hal lain yang telah Anda kerjakan.

Catatan : Meskipun kita tidak akan menulis CSS dalam tutorial ini, pengetahuan yang baik tentang CSS akan berguna saat Anda mengerjakan apa yang akan kita bahas.

Apa itu Tailwind CSS?

Tailwind CSS adalah kerangka kerja CSS tingkat rendah berbasis utilitas yang dimaksudkan untuk memudahkan pembuatan aplikasi web dengan kecepatan dan kurang fokus untuk menulis CSS khusus, tanpa meninggalkan zona nyaman kode HTML Anda, namun mencapai antarmuka yang mengagumkan.

Misalnya, Anda dapat menata tombol hanya dengan beberapa kelas (daripada selalu harus mendeklarasikan satu kelas besar secara terpisah dari HTML Anda dan menulis banyak properti untuk membuat sesuatu):

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

Kerangka kerja CSS lainnya (seperti Bootstrap, Foundation, Bulma, dan sebagainya) memberi Anda beragam komponen yang telah ditentukan sebelumnya (seperti modal, tombol, peringatan, kartu). Tetapi dengan Tailwind CSS, Anda dapat membuatnya sendiri, atau Anda terpaksa membuatnya sendiri tergantung pada model proyek Anda. Cara lain untuk mengatakannya, Anda benar-benar memiliki komponennya, dan Anda dapat memanfaatkan kekuatan penyesuaian Anda pada setiap komponen pilihan Anda. Ini berarti bahwa tidak perlu lagi melawan kerangka kerja, dan mencoba mencari tahu kelas mana yang perlu diganti untuk mendapatkan hasil yang Anda tuju pada awalnya.

Mengapa Menggunakan Tailwind CSS?

Mungkin Anda belum cukup siap untuk mengkhianati kerangka kerja lain, atau Anda belum yakin untuk menerima kebaikan yang datang dengan Tailwind CSS. Izinkan saya memberi Anda beberapa alasan mengapa Anda mungkin ingin mempertimbangkan Tailwind CSS.

Tidak Ada Konvensi Penamaan

Salah satu bagian paling menegangkan dalam menulis CSS khusus adalah harus memberi nama kelas. Pada setiap titik, Anda merenungkan kelas mana yang harus generik atau spesifik. Bagaimana Anda mengaturnya dan memastikannya mengalir? Tailwind CSS memecahkan masalah tersebut dengan lancar dengan menyediakan kelas berbasis utilitas yang dapat digunakan setiap saat .

Namun, kasus mungkin muncul di mana Anda perlu memberi nama beberapa kelas. Terkadang ini cenderung terjadi ketika Anda perlu mengekstrak komponen tertentu dan menggunakannya nanti dalam desain Anda (dengan bantuan arahan @apply ).

Manfaat Cache

Saat menulis CSS khusus (atau menggunakan kerangka kerja CSS tradisional lainnya), Anda harus selalu membuat perubahan pada file CSS Anda saat membuat perubahan pada desain Anda. Dengan Tailwind CSS, Anda tidak perlu khawatir sedikit pun karena Anda menggunakan kelas yang sama berulang kali di dalam markup. Ini berarti Anda tidak perlu merusak cache CSS Anda setiap saat untuk membuat perubahan kecil pada desain Anda.

Saat Tidak Menggunakan Tailwind CSS

Apakah menurut Anda saya harus selalu menggunakan Tailwind CSS untuk setiap proyek? Tentu saja tidak! Ada beberapa kasus penggunaan di mana Anda mungkin tidak ingin menggunakan Tailwind CSS.

Jika Anda Mengerjakan Proyek Kecil

Saat Anda perlu memulai proyek mini yang memiliki tenggat waktu yang sangat singkat (terutama sesuatu yang akan digunakan oleh beberapa pengguna atau hanya Anda sendiri), Tailwind CSS bukanlah pilihan terbaik. Dalam kasus tersebut, saya akan merekomendasikan menggunakan Bootstrap, Foundation atau kerangka kerja lain sebagai gantinya. Itu karena mereka datang dengan komponen siap pakai yang telah ditentukan sebelumnya (tema untuk memulai). Dengan Tailwind CSS, Anda harus membuat sendiri secara kreatif.

Jika Anda Seorang Pemula CSS

Sebelum masuk ke Tailwind CSS untuk proyek apa pun, disarankan untuk mengetahui CSS. Pemula yang ingin menggunakan Tailwind CSS untuk proyek berbasis web harus menguasai CSS terlebih dahulu hingga tingkat tertentu. Ini menyediakan kelas utilitas yang terkait dengan CSS yang mendasarinya, oleh karena itu, hanya mereka yang memiliki pengetahuan yang kuat tentang CSS yang dapat dengan mudah membangunnya.

Jika Anda Tidak Suka Menambahkan Banyak Kelas ke Elemen Anda

Saat menulis Tailwind CSS, Anda selalu harus menulis banyak kelas, yang membuat basis kode (HTML) Anda terlihat sibuk dan terkadang sulit dibaca. Jika Anda lebih suka menjaga kode tetap rapi, Anda mungkin ingin mempertimbangkan untuk menulis CSS khusus atau menggunakan kerangka kerja CSS lainnya (seperti Bootstrap).

Dengan alasan ini, inilah saatnya untuk beralih ke bisnis hari ini: mari kita siapkan Tailwind CSS dalam proyek React bersama-sama !

Mulai

Untuk menyiapkan proyek kami, kami akan membuat perancah aplikasi React baru menggunakan create-react-app . Jika Anda sudah melakukannya, lewati proses ini, jika tidak, jalankan perintah di bawah ini:

 npx create-react-app react-tailwindcss && cd react-tailwindcss

Selanjutnya, kami menginstal beberapa dependensi pengembangan. Anda dapat menggunakan salah satu opsi yang sesuai untuk Anda.

Menggunakan npm

 npm install tailwindcss postcss-cli [email protected] -D

Menggunakan Benang

 yarn add tailwindcss postcss-cli autoprefixer -D

Kita perlu menginisialisasi Tailwind CSS dengan membuat konfigurasi default. Ketik perintah di bawah ini di terminal Anda:

 npx tailwind init tailwind.js --full

Perintah ini membuat tailwind.js di direktori dasar proyek Anda; file tersebut berisi konfigurasi, seperti warna kami, tema, kueri media, dan sebagainya. Ini adalah file berguna yang membantu dengan kumpulan properti yang telah ditentukan sebelumnya yang akan membantu kebutuhan untuk merek ulang konvensi atau properti tertentu jika diperlukan.

Bagaimana Cara Mengkonfigurasi PostCSS?

Dokumentasi PostCSS menyatakan bahwa:

“PostCSS adalah alat untuk mengubah gaya dengan plugin JS. Plugin ini dapat melapisi CSS Anda, mendukung variabel dan mixin, mengubah sintaks CSS di masa mendatang, gambar sebaris, dan banyak lagi.”

Mengapa Autoprefixer?

Penting untuk menginstal Autoprefixer bersama Tailwind CSS karena Autoprefixer biasanya melacak caniuse.com untuk melihat properti CSS mana yang perlu diberi awalan. Oleh karena itu, Tailwind CSS tidak menyediakan awalan vendor apa pun. Jika Anda penasaran sebagai kucing sehubungan dengan PostCSS, navigasikan ke dokumentasi mereka.

Buat file konfigurasi PostCSS di direktori dasar Anda secara manual atau menggunakan perintah:

 touch postcss.config.js

Tambahkan baris kode berikut ke file PostCSS Anda:

 const tailwindcss = require('tailwindcss'); module.exports = { plugins: [ tailwindcss('./tailwind.js'), require('autoprefixer') ], };

Karena PostCSS diperlukan untuk lint CSS kita, maka konfigurasi ini.

Langkah Kode

• Kami mengambil paket Tailwind CSS dan menempatkannya dalam sebuah variabel.
• Kami membungkus tailwind.js (konfigurasi dasar default kami) dalam variabel tailwindcss kami.
• Kami mengambil paket autoprefixer .

Cara Menyuntikkan Komponen, Utilitas, dan Gaya Dasar Tailwind ke Aplikasi Anda

Di dalam folder src Anda buat folder, beri nama assets , di sinilah semua gaya Anda akan disimpan. Di folder itu, buat file tailwind.css dan file main.css masing-masing. File tailwind.css akan digunakan oleh kami untuk mengimpor gaya CSS Tailwind, dan untuk konfigurasi dan aturan khusus. main.css akan menampung gaya yang dihasilkan sebagai hasil dari apa yang kita miliki di file tailwind.css .

Selanjutnya, kita perlu mengimpor gaya dan konfigurasi dasar. Kami akan melakukannya di salah satu file CSS yang kami buat di atas. Tambahkan yang berikut ini ke file tailwind.css Anda.

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

Perhatikan bahwa kami menggunakan direktif @tailwind untuk memasukkan gaya base , components , dan utilities Tailwind ke dalam CSS kami:

• @tailwind base
  Ini menyuntikkan gaya dasar Tailwind, yang merupakan kombinasi dari Normalize.css dan beberapa gaya dasar tambahan.
  
  Catatan : Jika Anda ingin mendapatkan referensi lengkap dari semua gaya yang diterapkan oleh Preflight, lihat lembar gaya ini.
• @tailwind components
  Ini menyuntikkan kelas komponen apa pun (gaya yang dapat digunakan kembali seperti kartu dan elemen formulir, dll.) yang didaftarkan oleh plugin yang berbasis di file konfigurasi kami.
• @tailwind utilities
  Ini menyuntikkan semua kelas utilitas Tailwind (termasuk default dan utilitas Anda sendiri) yang dihasilkan berdasarkan file konfigurasi kami.

Tailwind CSS akan menukar arahan ini pada waktu pembuatan dengan semua CSS yang dihasilkannya. Jika Anda menggunakan postcss-import , gunakan ini sebagai gantinya:

 @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";

Cara Mengonfigurasi Aplikasi Anda Untuk Membangun CSS Anda

Selanjutnya, kita perlu mengonfigurasi proyek kita untuk membangun gaya CSS kita setiap kali kita menjalankan perintah npm start atau yarn start .

Buka file package.json Anda dan gunakan cuplikan di bawah ini sebagai pengganti bagian skrip dari file package.json Anda:

 "scripts": { "start": "npm run watch:css && react-scripts start", "build": "npm run watch:css && react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css" }

Mengimpor CSS Kami

Kita perlu mengimpor file CSS kita dengan tepat untuk memastikan bahwa itu diawasi dan dibangun dengan benar saat kita menjalankan yarn start atau npm start .

Buka file index.js Anda dan buat perubahan berikut:

1. Impor file main.css kita dan hapus import './index.css'; .
   

    import './assets/main.css'

   *index.js* Anda akan terlihat seperti ini setelah perubahan:

    import React from "react"; import ReactDOM from "react-dom"; import './assets/main.css'; import App from "./App"; ReactDOM.render(<App />, document.getElementById("root"));

2. Buka App.js dan hapus import logo from './logo.svg'; hanya menyisakan import React from 'react'; . Hapus juga semua yang ada di dalam komponen App . (Jangan khawatir jika App.js kami terlihat mandul sekarang — kami akan menambahkan beberapa kode saat kami melanjutkan dalam posting ini.)

Mari Membangun Proyek Kartu Profil

Sekarang setelah pengaturan kita bekerja dengan baik, dan semuanya terlihat baik, mari kita buat Kartu Profil. Namun, saya ingin menunjukkan kepada Anda bagaimana keadaan aplikasi kita sebelum kita mulai.

Untuk memulai aplikasi Anda, ketik perintah ini npm start atau yarn start .

Anda akan mengamati bahwa Tailwind CSS kami sedang membangun file yang diperlukan yang dibutuhkan di main.css .

Mari kita mulai dalam proyek kita. Berikut tampilan kode kami ( App.js ) tanpa mengimplementasikan kelas Tailwind CSS.

 import React from 'react'; function App() { return ( <div className=""> <img className="" src={require('./profile.jpg')} alt="Display" /> <div className=""> <div className=""> Blessing Krofegha </div> <p className=""> When i'm not coding i switch to netflix with biscuits and cold tea as my companion. <span></span> </p> </div> <div className=""> <span className="">#Software Engineer</span> <span className="">#Writter</span> <span className="">#Public Speaker</span> </div> </div> ); } export default App;

Hasil dari potongan kode di atas adalah sebagai berikut:

Seperti yang Anda lihat, semua teks telah disejajarkan ke kiri secara default. Gambarnya cukup besar karena tidak ada gaya. Komponen App memiliki empat divs utama yang akan kita tambahkan kelasnya. Ini kemudian akan, tentu saja, mengubah gaya elemen.

div pertama

 import React from 'react'; function App() { return ( <div className="max-w-sm rounded overflow-hidden shadow-lg"> <img className="w-full" src={require('./profile.jpg')} alt="Display" /> <div className=""> <div className=""> Blessing Krofegha </div> <p className=""> When I'm not coding, I switch to Netflix with biscuits and cold tea as my companion. <span></span> </p> </div> <div className=""> <span className="">#Software Engineer</span> <span className="">#Writter</span> <span className="">#Public Speaker</span> </div> </div> ); } export default App;

Langkah Kode

Kami memberikan div max-width dengan max-w-sm untuk layar kecil dan telah menambahkan border-radius menggunakan rounded class. Untuk mencegah bilah gulir muncul, kami menggunakan overflow-hidden .

Pada div pertama, kami menghiasi latar belakang kami dengan efek bayangan menggunakan box-shadow dengan kelas shadow-lg . Menggunakan ini berarti kita akan memiliki bayangan kotak (efek bayangan) 0px dari atas, 10px dari kanan, 15px dari bawah, dan -3px dari kiri (dengan hitam samar di left axis ).

Pada right axis , kita mendapatkan 0px dari atas, 4px dari kanan, 6px dari bawah dan -2px dari bawah (dengan bayangan hitam rgba(0,0,0, 0.05) yang lebih terang).

Apakah maksud Anda nama kelas sederhana seperti max-w-sm rounded overflow-hidden shadow-lg bertanggung jawab atas semua kehebatan ini? Ya! Itulah kehebatan Tailwind CSS!

Selanjutnya, kami memberi img lebar 100% dengan w-full dan atribut src dan, tentu saja, atribut alt .

Berikut tampilan kartu Profil baru kami:

div kedua

Tambahkan kelas ini px-6 py-4 ke div kedua kami :

 import React from 'react'; function App() { return ( <div className="max-w-sm rounded overflow-hidden shadow-lg"> <img className="w-full" src={require('./profile.jpg')} alt="Display" /> <div className="px-6 py-4"> <div className=""> Blessing Krofegha </div> <p className=""> When i'm not coding i switch to netflix with biscuits and cold tea as my companion. <span></span> </p> </div> <div className=""> <span className="">#Software Engineer</span> <span className="">#Writter</span> <span className="">#Public Speaker</span> </div> </div> ); } export default App;

Langkah Kode

Dalam div kedua kami, kami memberikan padding-right/left 1rem mewakili px-6 di x-axis dan padding-top/bottom 1.5rem yang merupakan py-4 di y-axis .

div ketiga

Tambahkan kelas font-bold text-purple-500 text-xl mb-2 ke div kedua kami :

 import React from 'react'; function App() { return ( <div className="max-w-sm rounded overflow-hidden shadow-lg"> <img className="w-full" src={require('./profile.jpg')} alt="Display" /> <div className="px-6 py-4"> <div className="font-bold text-purple-500 text-xl mb-2"> Blessing Krofegha </div> <p className="text-gray-700 text-base"> When i'm not coding i switch to netflix with biscuits and cold tea as my companion. <span></span> </p> </div> <div className=""> <span className="">#Software Engineer</span> <span className="">#Writter</span> <span className="">#Public Speaker</span> </div> </div> ); } export default App;

Langkah Kode

Kami mengatur font-weight ke nilai 700 dengan kelas font-bold . Selanjutnya, kami memberi div kami warna ungu muda menggunakan text-purple-500 dan membuat font-size kami ekstra kecil dengan menggunakan text-xl . Kami memberi div kami margin-bottom 0.5rem dengan menggunakan mb-2 . Kami juga menambahkan paragraph dan membuat warnanya menjadi abu-abu yang lebih gelap menggunakan text-gray-700 .

Kami menambahkan warna teks terang ke paragraf kami dengan text-gray-700 dan ukuran font 1em menggunakan text-base . Oleh karena itu, text-base adalah font-size: 1rem dan text-gray-700 adalah color: #4a5568;

Mari kita lihat perubahan apa yang dibuat dengan div ke-3 kami :

div keempat

 import React from 'react'; function App() { return ( <div className="max-w-sm rounded overflow-hidden shadow-lg"> <img className="w-full" src={require('./profile.jpg')} alt="Display" /> <div className="px-6 py-4"> <div className="font-bold text-purple-500 text-xl mb-2"> Blessing Krofegha </div> <p className="text-gray-700 text-base"> When i'm not coding i switch to netflix with biscuits and cold tea as my companion. <span></span> </p> </div> <div className="px-6 py-4"> <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Software Engineer</span> <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Writter</span> <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mt-2 ml-20">#Public Speaker</span> </div> </div> ); } export default App;

Langkah Kode

Seperti div sebelumnya yang disebutkan di atas, kami menambahkan padding-right/left dari 1rem mewakili px-6 di x-axis dan padding-top/bottom dari 1.5rem masing-masing mewakili py-4 di y-axis .

Terakhir, kami menambahkan beberapa kelas ke spans kami yang menyertakan inline-block . Apa yang dilakukan adalah mengatur tampilan span yang berarti elemen diperlakukan seperti elemen inline lainnya tetapi memungkinkan penggunaan properti block .

Kami menambahkan background-color abu-abu menggunakan bg-gray-200 dan membuat border-radius 9999px menggunakan kelas rounded-full ; px3 menambahkan bantalan ke x-axis sementara py-1 menambahkan bantalan di y-axis . text-sm ditambahkan untuk membuat font-size teks menjadi kecil dan text-gray-700 digunakan untuk menambahkan bayangan gelap warna abu-abu pada teks. Kami melanjutkan untuk menambahkan margin-right ke elemen span.

Jika Anda telah mengikuti dengan cermat, maka Anda seharusnya memiliki sesuatu yang serupa:

Catatan : Anda dapat mengganti gambar dengan gambar pilihan Anda (sebaiknya milik Anda) dan juga mempersonalisasi konten sesuai keinginan Anda.

Optimasi Untuk Produksi

Saat membangun untuk produksi, disarankan untuk memangkas file build Anda, terutama file css dan js . Kedua file saat ini memiliki ukuran yang keterlaluan.

Anda akan setuju dengan saya bahwa ukuran file CSS menakutkan untuk produksi, tetapi kabar baiknya adalah ada jalan keluarnya. Untuk mengecilkan ukuran CSS kita, jalankan npm i @fullhuman/postcss-purgecss di terminal Anda, lalu tambahkan kode berikut di postcss.config.js :

 const tailwindcss = require("tailwindcss"); module.exports = { plugins: [ tailwindcss("./tailwind.js"), require("autoprefixer"), require("@fullhuman/postcss-purgecss")({ content: ["./src/**/*.js", "./public/index.html"], defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g)|| [], }), ], };

Langkah Kode

• Langkah pertama yang kami ambil adalah membutuhkan @fullhuman/postcss-purgecss , selanjutnya kami memanggilnya sebagai fungsi dan meneruskan beberapa konfigurasi.
• Properti content menentukan jalur ke file templat kami, dan dalam kasus ini, file templat adalah file js dan html kami, dan karena itu kami menentukan jalurnya.
• Selanjutnya, kita perlu memberi tahu purgecss cara menemukan kelas css yang tidak digunakan dan menghapusnya, kita melakukannya menggunakan kunci defaultExtractor , dan kita melewatkan fungsi yang mengambil konten file dan mengembalikan nama kelas yang ditemukan dalam file itu menggunakan regEx .
• Menggunakan regex, kami memeriksa apakah konten yang ditemukan cocok dengan pola (kelas dengan huruf besar, huruf kecil, angka, garis bawah, titik dua, dan garis miring) dan jika tidak ada kecocokan, kami mengembalikan array kosong.
• Sekarang, ketika kami menjalankan npm run build di terminal kami, Anda akan melihat yang berikut ini.

Anda sekarang dapat melihat bahwa ukuran CSS kami telah dipangkas dari 186.67 KB menjadi 1.02KB . Itu banyak jika Anda bertanya kepada saya! Sekarang, Anda dapat mengirimkan aplikasi ke produksi.

Kesimpulan

Saya harap Anda menikmati tutorial ini. Tentu saja, Anda dapat selalu melangkah lebih jauh dengan membuat aplikasi profil kecil ini yang mengatakan lebih banyak tentang Anda di luar sedikit informasi yang kami miliki di atas. Misalnya, Anda dapat terus membagikan list keahlian yang Anda miliki, atau menambahkan table ke proyek yang telah Anda kerjakan dan mungkin formulir kontak. Biarkan kreativitas Anda mengalir, dan tolong bagikan proyek Anda di bagian komentar di bawah — Saya ingin melihat apa yang Anda hasilkan!

• Repo pendukung untuk artikel ini tersedia di GitHub.

• Dokumentasi Tailwind CSS (situs web Tailwind CSS resmi)

• “Tailwind CSS Dalam JavaScript,” Christoph Benjamin Weber