Tailwind CSS කියන්නේ මොකක්ද ? What is Tailwind CSS ?

හිතන්නකෝ ඔයා Lego සෙල්ලම් බඩු වලින් ගෙයක් හදනවා කියලා. ඔයාට ඕන කරන හැඩතල, පාටවල් තියෙන පොඩි පොඩි කෑලි (blocks) ගොඩක් තියෙනවා. ඔයා කරන්නේ ඒ කෑලි එකිනෙක සම්බන්ධ කරලා ඔයාට අවශ්‍ය නිර්මාණය ගොඩනගන එක.

වෙනම CSS file එකක් හදලා ඒකෙ styles ලිය ලිය ඉන්න අවශ්‍ය වෙන්නේ නැහැ.

React project එකක් කරනකොට CSS ලියන එක සමහර වෙලාවට ටිකක් කරදරයක් වෙන්න පුළුවන් නේද? හැමදේටම class ලියලා, වෙනම CSS file එකක ඒවට අදාළ style ලියලා, ඒ දෙක manage කරන එක ටිකක් විතර වෙහෙසකර වැඩක්. අන්න ඒකට හොඳම විසඳුමක් තමයි Tailwind CSS කියන්නේ.

ඇයි අපි Tailwind CSS පාවිච්චි කරන්න ඕන ?

1. වේගවත් නිර්මාණකරණය: HTML එක ඇතුළෙම class දාලා style කරන නිසා project එක හදන වේගය ගොඩක් වැඩි වෙනවා.
2. පහසුවෙන් වෙනස් කළ හැකි වීම (Customizable): අපිට ඕන විදියට Tailwind වල default settings වෙනස් කරලා අපේ project එකටම හරියන විදියේ design system එකක් හදාගන්න පුළුවන්.
3. Responsive Design: Mobile, tablet, desktop වගේ ඕනම screen size එකකට හරියන විදියට design එක හදාගන්න එක ගොඩක් පහසුයි.
4. කුඩා Production File Size: Project එක build කරනකොට, ඔයා පාවිච්චි කරපු class වලට අදාළ CSS විතරක් ඇතුළත් කරලා පොඩි CSS file එකක් තමයි හැදෙන්නේ. ඒ නිසා වෙබ්සයිට් එක load වෙන වේගය වැඩියි.

හරි, දැන් අපි බලමු React project එකකට Tailwind CSS එකතු කරගන්නේ කොහොමද කියලා.

පියවර 1: අලුත් React Project එකක් හදාගමු

මුලින්ම අපිට ඕනෙ කරනවා React Project එකක්. මෙතනදී අපි කලින් Create කරගත්ත අපේ React Project එක Visual Studio එක හරහා Open කරගන්න ඕනේ. ඔයාට React Project එකක් create කරගන්න Idea එකක් නැත්නම් මෙන් මේ Article එක කියවල Setup කරගෙන එන්න.

පියවර 2: Tailwind CSS Install කරමු

හරි අපි දැන් යමු Tailwind CSS Website එකට ඔයාලට. බලාගන්න පුලුවන් මුලින්ම Website එකේ Navbar එකේ Docs කියලා Tab එකක් ඇතුලට යන්න. දැන් අපිට බලාගන්න පුලුවන් Documentation එකක් මේ තමයි Tailwind CSS අපිට දෙන හැම Feature එකක්ම තියෙන්නේ ඔයාල එකින් එකට බලන්න මොනවද තියෙන්නේ කියලා.

Tailwind Website Link – Tailwind.com

1. එහි තිබෙන No 1 කොටස අපි දැනටමත් කර අවසන් නිසා අපි ඒක skip කරගමු.
2. අපි දැන් කරන්න ඕනේ No 2 මෙන්න මෙ Command එක copy කරගෙන අපේ Project එකට ඇවිත් අපි අලුත් Terminal එකක් open කරගන්න ඕනේ. ඔයාලට පුලුවන් Visual Code එකේ terminal Tap එකෙන් New Terminal එකක් open කරගන්න.

npm install tailwindcss @tailwindcss/vite

පියවර 3: Tailwind Config හදමු

අපි නැවත Tailwinds Document ගිහින් No 3 එකේ Command එක copy කරගෙන ඔයාගේ Project folder වල යටම තියෙනවා vite.config.js කියලා File එකක් අපි ඒකෙ තියෙන Code remove කරලා මේ Copy කරහත්ත code එක past කරගන්න ඕනේ.

import { defineConfig } from 'vite'

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({

  plugins: [

    tailwindcss(),

  ],

})

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({

  plugins: [

    react(),

    tailwindcss()

  ],

})

@import "tailwindcss";

පියවර 4: React Component එකක Tailwind Class පාවිච්චි කරමු

• src/App.jsx file එක open කරගන්න.
• ඒකෙ තියෙන code ඔක්කොම අයින් කරලා, මේ code ටික paste කරන්න.

import React from 'react'

const App = () => {

  return (

// මුළු screen එකම cover වෙන්න div එකක් හදලා, content එක මැදට ගන්නවා

    <div className="flex justify-center items-center min-h-screen bg-slate-100">

     

      {/* අපේ card එක */}

      <div className="max-w-sm p-8 bg-white rounded-xl shadow-lg space-y-4">

        <div>

          <h1 className="text-3xl font-bold text-indigo-600">

            Tailwind CSS සහ React!

          </h1>

          <p className="text-slate-500 mt-2">

            මේ තියෙන්නේ Tailwind utility class පාවිච්චි කරලා හදපු සරල card එකක්.

          </p>

        </div>

        <button className="px-4 py-2 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75">

          Click Me!

        </button>

      </div>

    </div>

  )

}

export default App

පියවර 5: Project එක Run කරමු

npm run dev

අවසාන වශයෙන්