我用了vite react tailwind ， 並用typescript寫

跟他一樣

[vite] 使用 Vite 快速建立 React + TypeScript + Tailwind CSS 專案 | WeiWei 的前端程式教學與筆記 (wei-docusaurus-vercel.verc

<html lang="en"><head><style> .article-container { width: 100%; font-family: Microsoft JhengHei,Helvetica Neue,Helvetica,Arial,sans-serif; } ul, ol { margin: 12px auto; max-width: 740px; color: #535150; line-height: 1.8; padding-left: 0px; } .graf--img { display: table; justify-content: center; align-items: center; text-align: center; color: gray; font-size: 14px; letter-spacing: 0px; margin: 10px auto 50px; width: 100%; position: relative; clear: both; } .graf--img.center img { width: 100%; max-width: 740px; margin: 10px auto 0px; display: block; margin: 0 auto; } .graf--img.full img { width: 100%; } .captionTheme__wrapper { width: 100%; font-style: normal; line-height: 22px; font-size: 16px; max-width: 600px; margin-top: 8px; display: inline-block; } .graf--img.full { max-width: 100%; margin: 40px 0px; display: block; margin: 0 auto; align-items: center; } .graf--figure { text-align: center; color: gray; font-style: italic; font-size: 15px; margin: 28px auto; box-sizing: border-box; } .graf--figure iframe { width: 100%; max-width: 740px; margin: 0 auto; } .graf--p { font-size: 16px; line-height: 1.8; font-family: "Microsoft JhengHei fixed", "Helvetica Neue" ,"Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif; letter-spacing: 1px; font-weight: 400; max-width: 740px; color: #535150; text-align: left; } .graf--p > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--li > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--quotesSpecial > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--blockquote > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--h1 > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--h2 > a { color: #00B3C6 !important; text-decoration: none !important; } .graf--h3 > a { color: #00B3C6 !important; text-decoration: none !important; } a.graf--mention { color: #535150 !important; text-decoration: underline !important; font-weight: 700; } .graf--h2 { font-size: 24px; padding: 0; max-width: 740px; text-align: left; letter-spacing: 1px; font-weight: 700; margin-top: 34px; line-height: 1.5; } .graf--h3 { font-size: 18px; padding: 0; max-width: 740px; text-align: left; letter-spacing: 1px; font-weight: 700; margin-top: 28px; line-height: 1.5; } .graf--li { font-size: 16px; padding: 0px 0px 0px 4px; font-weight: 400; letter-spacing: 0px; list-style-position: outside; text-align:left; margin-left: 24px; } .graf--hr { width: 100%; margin: 0px auto; transform: translateY(-50%); position: relative; padding: 0px; text-align: left; max-width: 740px; margin: 0 auto; } .graf--hr hr { height: 0; } .graf--blockquote { padding: 10px 0px 10px 16px; font-size: 16px; color: #7A7574; letter-spacing: 1px; margin: 28px 0px; border-left: 4px solid #DDD9D8; width: 100%; max-width: 740px; text-align: left; } .graf--quotesSpecial { display: table; color: #7A7574; position: relative; padding: 31.5px 40px; text-align: center; letter-spacing: 0px; position: relative; margin: 29px auto; font-family: "Microsoft JhengHei fixed", "Helvetica Neue", "Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif; font-size: 16px; -webkit-box-ordinal-group: 1; -webkit-box-flex: 0; } .embed-wrapper { max-width: 740px; border: 1px solid #DDD9D8; display: block; padding: 12px; border-radius: 8px; margin: 12px 0px; text-decoration: none !important; } .embed-title { font-size: 16px; font-weight: 700; color: #535150; margin-bottom: 8px; text-align: left; line-height: 1.5; text-decoration: none !important; } .embed-description { width: 100%; font-size: 14px; color: #7A7574; line-height: 1.5; max-height: 150px; text-align: left; overflow: hidden; padding: 12px 0px; } .embed-url > a { width: 100%; font-size: 14px; color: #141413 !important; text-decoration: none !important; line-height: 1.5; text-align: left; } .embed-thumbnail-wrapper { padding-left: 12px; } .embed-thumbnail { width:100px; border-radius: 8px; } pre { background: #F6F6F6; border-radius: 8px; padding: 16px; font-size: 16px; color: #535150; line-height: 180%; text-align: left; } .lexical__textBold { font-weight: bold; } .lexical__textItalic { font-style: italic; } .lexical__textUnderline { text-decoration: underline; } .lexical__textStrikethrough { text-decoration: line-through; } .lexical__textUnderlineStrikethrough { text-decoration: underline line-through; } .lexical__textSubscript { font-size: 0.8em; vertical-align: sub; } .lexical__textSuperscript { font-size: 0.8em; vertical-align: super; } .lexical__textCode { background-color: rgb(240, 242, 245); padding: 1px 0.25rem; font-family: Menlo, Consolas, Monaco, monospace; font-size: 94%; } </style></head><body><div class="article-container">我用了vite react tailwind ， 並用typescript寫跟他一樣<a href="https://wei-docusaurus-vercel.vercel.app/docs/Vite/React-Ts-Tailwind">[vite] 使用 Vite 快速建立 React + TypeScript + Tailwind CSS 專案 | WeiWei 的前端程式教學與筆記 (wei-docusaurus-vercel.vercel.app)</a> 我還有裝react icon<a href="https://react-icons.github.io/react-icons/">React Icons (react-icons.github.io)</a>下載打這行<pre spellcheck="false" data-highlight-language="javascript">npm install react-icons --save</pre></div></body></html>

以行動支持創作者！付費即可解鎖

軟體開發

今年，vocus 的 iOS 工程師 YC 帶著技術交流（以及讓更多人認識 vocus）的使命，參與了今年的 try! Swift Tokyo 研討會，這系列的文章，我們將會分享研討會當中的精彩學習，還有那些網路上看不到的研討會體驗細節（讚嘆主辦方的用心）！

方格子 vocus 官方沙龍

vocus tech｜iOS 工程師前進東京！參加 try! Swift Tokyo 研討會的學習與啟發（上）

React tailwindcss web

這是一篇帶新手快速入門的Web教學。會帶你製作第一個todo-list，雖然看起來很簡單，但其實蘊含很多觀念。

Web開發日誌

我的開發環境

我用了vite react tailwind ， 並用typescript寫跟他一樣<a href="https://wei-docusaurus-vercel.vercel.app/docs/Vite/React-Ts-Tailwind">[vite] 使用 Vite 快速建立 React + TypeScript + Tailwind CSS 專案 | WeiWei 的前端程式教學與筆記 (wei-docusaurus-vercel.vercel.app)</a> 我還有裝react icon<a href="https://react-icons.github.io/react-icons/">React Icons (react-icons.github.io)</a>下載打這行<pre class="lexical__code" spellcheck="false" data-language="javascript">npm install react-icons --save</pre>