[練習tailwindCSS]Dark Mode / 全域class / 自定義class的值

<template>
  <div class="home">
    <div class="bg-white dark:bg-black h-48">
      <button @click="changeMode">change</button>
    </div>
  </div>
</template>

<script>
export default {
  setup() {
    const changeMode = () => {
      document.documentElement.classList.add('dark') // 會在html標籤上加一個class: dark
    }
    return {
      changeMode
    }
  }
}
</script>

///tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

https://github.com/fenturechance/tailwindCSSPractice2021/tree/146c72deff733a64e96998c01c3a1b674c08e030

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  @font-face {
    font-family: Microsoft JhengHei;
  }

  h1 {
    @apply text-2xl;
  }

  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

<template>
  <div class="home">
    <h1>我是大標題</h1>
    <h2>我是小標題</h2>
    <button class="btn-blue">按鈕2</button>
  </div>
</template>

<script>
export default {
}
</script>

https://github.com/fenturechance/tailwindCSSPractice2021/tree/a986b3e52f037c042216793dac02e62657b7ca58

// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    colors: {
      gray: '#eee',
      blue: '#0af',
    },
    extend: {
      borderRadius: {
        '4xl': '2rem',
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
  ],
}

<template>
  <div class="home">
    <h1 class="text-gray">我是大標題</h1>
    <h2 class="text-blue">我是小標題</h2>
    <button class=" rounded-4xl bg-blue px-8 py-6">按鈕2</button>
  </div>
</template>

<script>
export default {
}
</script>

https://github.com/fenturechance/tailwindCSSPractice2021/tree/c2b79e21b8780191b0aea8cc4259ed86ee08380f