上一集用最新的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
