Scribd
Upload
1 views

Modul_TailwindCSS

Modul Tailwind CSS memberikan pengenalan tentang framework CSS utility-first yang memungkinkan pengembangan antarmuka web dengan cepat dan efisien. Modul ini mencakup konsep utility class, responsive design, layouting, typography, warna, customisasi, dan studi kasus pembuatan landing page. Instalasi dapat dilakukan melalui CDN atau NPM, dan terdapat berbagai contoh penggunaan untuk memudahkan pemahaman.

Uploaded by

septemberfoundation2022
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

Modul_TailwindCSS

Modul Tailwind CSS memberikan pengenalan tentang framework CSS utility-first yang memungkinkan pengembangan antarmuka web dengan cepat dan efisien. Modul ini mencakup konsep utility class, responsive design, layouting, typography, warna, customisasi, dan studi kasus pembuatan landing page. Instalasi dapat dilakukan melalui CDN atau NPM, dan terdapat berbagai contoh penggunaan untuk memudahkan pemahaman.

Uploaded by

septemberfoundation2022
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Modul Tailwind CSS

Modul 1: Pengenalan Tailwind CSS

- Apa itu Tailwind CSS?

Tailwind CSS adalah framework CSS utility-first yang memungkinkan developer membangun antarmuka web

secara cepat dengan utility class.

- Keunggulan Tailwind:

- Cepat dan efisien

- Highly customizable

- Responsive & mobile-friendly

- Cara instalasi:

- CDN: <link rel="stylesheet" href="https://cdn.tailwindcss.com">

- NPM: npm install -D tailwindcss

- Contoh penggunaan:

<div class="text-center text-red-500">Hello Tailwind</div>


Modul Tailwind CSS

Modul 2: Konsep Utility Class dan Responsive Design

- Utility Class: class CSS siap pakai untuk styling spesifik.

- Breakpoints:

- sm: 640px

- md: 768px

- lg: 1024px

- Contoh:

<div class="text-lg md:text-2xl">Responsive Text</div>


Modul Tailwind CSS

Modul 3: Layouting dengan Tailwind CSS

- Flexbox Utilities:

<div class="flex justify-center items-center">Content</div>

- Grid Utilities:

<div class="grid grid-cols-3 gap-4">...</div>

- Spacing: m-4, p-2

- Width/Height: w-1/2, h-32

- Position: absolute, relative, z-10


Modul Tailwind CSS

Modul 4: Typography dan Warna

- Text Styling: text-xl, font-bold

- Warna: text-blue-500, bg-yellow-300

- Custom Warna:

tailwind.config.js -> extend colors

- Dark Mode:

mode: 'class'
Modul Tailwind CSS

Modul 5: Component dan State Variants

- Button:

<button class="bg-blue-500 hover:bg-blue-700 text-white">Click</button>

- Variants: hover:, focus:, active:

- Group Hover:

<div class="group hover:bg-gray-200">...</div>

- Transition:

transition duration-300 ease-in-out


Modul Tailwind CSS

Modul 6: Customisasi Tailwind

- tailwind.config.js

module.exports = {

theme: {

extend: {

colors: { brand: '#FF6363' }

- Plugins: forms, typography, aspect-ratio


Modul Tailwind CSS

Modul 7: Studi Kasus Pembuatan Landing Page

- Desain wireframe sederhana

- Setup project:

npm create vite

npm install -D tailwindcss

- Buat komponen: header, hero, services, footer

- Deploy ke Netlify

You might also like