本文是在實(shí)際項(xiàng)目開發(fā)中使用Tailwindcss的感受门驾，給還未決定的選擇使用Tailwindcss的朋友們一些參考。
我十分鼓勵(lì)大家選擇Tainwindcss作為Vue項(xiàng)目的前端和后臺(tái)的首選css工具多柑。
Tailwindcss已經(jīng)成為我的必須工具奶是。
2021/3/4 更新
在自己開發(fā)多個(gè)項(xiàng)目以后，對(duì)TailwindCSS感受修正竣灌。1聂沙、是和快速開發(fā)啊，尤其是網(wǎng)站的手機(jī)和電腦適配項(xiàng)目帐偎。2. 如果你是開發(fā)中長(zhǎng)期項(xiàng)目逐纬，或者注重細(xì)節(jié)、交互削樊，建議還是自己寫CSS豁生。3兔毒、TailwindCSS被我作為寫CSS的工具參考呢
為什么我覺得用Tailwindcss會(huì)很舒服
1. 直接在vue中寫css命令，省去了繁瑣的css命名甸箱，省去了來回跳轉(zhuǎn)頁面編輯育叁，省去了寫一堆CSS的痛苦
Before
<div class="bottomNav"></div>
<style scoped>
.bottomNav-cartfooter {
position: fixed;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
padding-left: 21.066667vw;
background-color: rgba(61, 61, 63, 0.9);
height: 12.8vw;
z-index: 1000;
}
</style>
After
寫起來實(shí)在是太爽了！
其實(shí)就這一個(gè)原因就夠了
2. Tailwindcss是為移動(dòng)而生芍殖，非常簡(jiǎn)單就可以將適配寫好豪嗽，超級(jí)簡(jiǎn)單
一行代碼搞定手機(jī)、平板豌骏、電腦的支持龟梦。
<div class="flex sm:inline-flex md:block lg:hidden xl:flex ...">
<!-- ... -->
</div>
如官網(wǎng)示例
3. 對(duì)動(dòng)態(tài)的支持，如Hover
<button class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white...">
Hover me
</button>
類似Hover窃躲，Transition 也是很容易實(shí)現(xiàn)计贰，請(qǐng)參見官網(wǎng)：
4. 總結(jié)
- 您肯定會(huì)為繁瑣的寫css感到郁悶，框架（如ElementUI或者是Bootstrap）實(shí)際過程中限制太多蒂窒，定制是一件很郁悶的事情躁倒。選擇Tailwindcss的朋友本來就會(huì)選擇更多的定制化css。
- 雖然每個(gè)部分都要寫class="fixed w-full..."洒琢，但實(shí)際上很多項(xiàng)目在css方面并沒有多需要封裝的需求秧秉，對(duì)于中小型項(xiàng)目是足夠的。
- 我們本來就更應(yīng)該將更多的精力放到邏輯和功能的實(shí)現(xiàn)衰抑，CSS實(shí)現(xiàn)精美的展示應(yīng)該越便捷越好象迎。
- 對(duì)移動(dòng)端的非常快速的開發(fā)支持停士，對(duì)開發(fā)者是最大的福音挖帘。再也不用頭疼開發(fā)需要適配的網(wǎng)站了。
2. Tailwindcss的資源
- 官網(wǎng)https://tailwindcss.com/
提供了便捷的查找工具
2.https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/alerts
需要購(gòu)買恋技，才能夠解鎖更多代碼拇舀。但實(shí)際上用一些基本的就夠了。之所以推薦蜻底，是因?yàn)槊赓M(fèi)的一些代碼寫法還是很經(jīng)典的骄崩。
- 自動(dòng)生成Grid的代碼 https://tailwindgrids.com/#/
