Vite前端工具加入Tailwindcss教學

上一集用最新的Vite前端工具去創建初始檔案，這一集來加入Tailwindcss吧

如果不知道怎麼用vite的朋友們，可以看看這篇文章

使用Vite工具創建開發初始檔案的教學:https://vocus.cc/article/6628fc95fd89780001913d99

首先在你的command line 打以下指令，去創建你想要用的技術

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

依照個人的專案需求，把這些加入到tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

./src/index.css 路徑裡，把Tailwindcss layer 再到你的global css

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

重新啟動，在你的terminal 裡面

npm run dev​

如果不知道怎麼使用終端器(Terminal)，可以來這篇文章看看

https://vocus.cc/article/64acfb28fd89780001b908e5

一起來測試一下吧

export default function App() {
  return (
			<p className="text-4xl text-blue-600"> Hello Tailwildcss! </p>
  )
}

影片教學

下一集教學，教大家做應用程式用Vite製作一個應用程式

資料來源

tailwindcsss 官方文件

- https://tailwindcss.com/docs/guides/vite

額外資源教學

如何用FIgma製作個人作品集教學 - https://vocus.cc/article/645c733dfd89780001ffe890

學習如何設計好產品 - 使用者經驗設計 | 易用性 | 通用設計 - https://vocus.cc/article/64637f74fd8978000175c0f8

前端教學架設TodoApp

- https://vocus.cc/article/64637f74fd8978000175c0f8

學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程 - https://vocus.cc/article/64637f74fd8978000175c0f8

更多相關教學文章

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/

JayLinXR FB: https://www.facebook.com/JayLinXR