dektaiimage

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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;

dektaiimage

<div class="bg-white dark:bg-slate-800 ...">
  ....
</div>

dektaiimage

<div>
  <img class="w-16 md:w-32 lg:w-48" src="...">
</div>

dektaiimage

<button class="bg-sky-600 hover:bg-sky-700 ...">
  Save changes
</button>

dektaiimage

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

.btn {
  @apply px-3 py-2 rounded-lg;
}

.btn:not([class*="btn--"]) {
  @apply bg-gray-200 text-gray-600;

dektaiimage

<button type="button" class="btn">Default</button>
<button type="button" class="btn btn--primary">Primary</button>
<button type="button" class="btn btn--success">Success</button>
<button type="button" class="btn btn--danger">Danger</button>

dektaiimage

<button type="button" class="px-3 py-2 rounded-lg bg-gray-200 text-gray-600">Default</button>
<button type="button" class="px-3 py-2 rounded-lg bg-blue-500 text-blue-100">Primary</button>
<button type="button" class="px-3 py-2 rounded-lg bg-green-500 text-green-100">Success</button>
<button type="button" class="px-3 py-2 rounded-lg bg-red-500 text-red-100">Danger</button>

dektaiimage

<button type="button" class="px-3 py-2 rounded-lg bg-gray-200 text-gray-600">Default</button>

<!-- 
px-3 เป็นการกำหนด padding ซ้าย ขวา
py-2 เป็นการกำหนด padding บน ล่าง
bg-gray-200 เป็นการกำหนดสีพื้นหลัง
text-gray-600 เป็นการกำหนดสีของตัวอักษร
rounded-lg เป็นการกำหนดความโค้งของขอบ 
-->

dektaiimage

<!-- Bootstrap -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- tailwind css -->
<button type="button" class="bg-blue-600 text-gray-200 rounded hover:bg-blue-500 px-4 py-2 focus:outline-none">Primary</button>

dektaiimage

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function useFetch(url){
  const [data, setData] = useState([]);
  
  useEffect(() => {
    const fetchData = async () => {
      const { data } = await axios.get(url)
      setPosts(data);