Vite前端工具加入Tailwindcss教學
閱讀時間約 2 分鐘
上一集用最新的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
12會員
32Content count
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
你可能也想看
Google News 追蹤
本專欄將提供給您最新的市場資訊、產業研究、交易心法、優質公司介紹，以上內容並非個股分析，還請各位依據自身狀況作出交易決策。歡迎訂閱支持我，獲得相關內容，也祝您的投資之路順遂！
每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ
每月 $99 訂閱方案👉https://re
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
作為一個純後端，不會前端也是正常的事(誤)，但該練習的技能線還是得每天練習一點，尤其我是一個前端小廢物，那既然要用Laravel 9 版本來做開發，那就得先試試看vite這個新的工具，基本上這邊就簡單介紹使用方式，另一篇在額外說明Laravel Mix 與 Vite 差別。
npm 是一個套件管理工具，開發中經常需要使用第三方套件，npm 是可以用來管理很多套件的工具，這邊指的套件可能是 Library, 框架, 工具等，例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由它管理。
老師請問tailwind是什麼呢？
Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
請您現在扮演一位幽默博學的老師，回答什麼是sass中的mixin概念
很高興回答這個問題！在 Sass 中，Mixin 是一種可以將一組 CSS 屬性集合放在一起，以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性，使其更加靈活和強大。
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...
這篇文中，將會重點介紹網pxCode裡，使用者介面的四大功能項目，分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
本專欄將提供給您最新的市場資訊、產業研究、交易心法、優質公司介紹，以上內容並非個股分析，還請各位依據自身狀況作出交易決策。歡迎訂閱支持我，獲得相關內容，也祝您的投資之路順遂！
每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ
每月 $99 訂閱方案👉https://re
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
作為一個純後端，不會前端也是正常的事(誤)，但該練習的技能線還是得每天練習一點，尤其我是一個前端小廢物，那既然要用Laravel 9 版本來做開發，那就得先試試看vite這個新的工具，基本上這邊就簡單介紹使用方式，另一篇在額外說明Laravel Mix 與 Vite 差別。
npm 是一個套件管理工具，開發中經常需要使用第三方套件，npm 是可以用來管理很多套件的工具，這邊指的套件可能是 Library, 框架, 工具等，例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由它管理。
老師請問tailwind是什麼呢？
Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
請您現在扮演一位幽默博學的老師，回答什麼是sass中的mixin概念
很高興回答這個問題！在 Sass 中，Mixin 是一種可以將一組 CSS 屬性集合放在一起，以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性，使其更加靈活和強大。
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...
這篇文中，將會重點介紹網pxCode裡，使用者介面的四大功能項目，分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas