寫在前面
今天寫一篇關(guān)于tailwindcss 的文章，其實(shí)這個(gè)css技術(shù)已經(jīng)出現(xiàn)很久了，在一些大型項(xiàng)目很多人也已經(jīng)在用了，雖然不是說必須要會(huì)吧，但是沒聽說過肯定是不行的，他的操作邏輯應(yīng)該是和unocss差不多，但是今天我們不寫unocss，因?yàn)槲乙矝]咋看，沒有具體的demo給到你們，今天我們就簡(jiǎn)單的寫一個(gè)demo看一下tailwindcss的實(shí)現(xiàn)優(yōu)勢(shì)到底是什么，今天就實(shí)現(xiàn)一個(gè)非常簡(jiǎn)單的登錄頁面，大概效果如下：下面我們分別使用三種方式實(shí)現(xiàn)，原生css，預(yù)編譯器scss，和 tailwindcss 最后我會(huì)說一下我對(duì)tailwindcss的一些看法
使用原生實(shí)現(xiàn)
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Login</title></head><body id="root">
<div class="container">
<div class="c-top">
<h2>TAILWINDCSS-前端.火雞</h2>
</div>
<div class="c-bottom">
<div class="c-input">
<div class="c-icon">
<img class="c-img" src="../assets/image/accout.png">
</div>
<input class="c-inu" type="input" name="">
</div>
<div class="c-input">
<div class="c-icon">
<img class="c-img" src="../assets/image/pwd.png">
</div>
<input class="c-inu" type="password" name="">
</div>
<button class="c-btn" type="button">立即登陸</button>
</div>
</div></body><style>#root{
height: 100svh;
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
display: flex;
justify-content: center;
align-items: center;}.container{
display: flex;
flex-direction: column;
width: 400px;}.c-top{
height: 150px;
background-color: #5386ec;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 10px 10px 0 0 ; }.c-bottom{
height: 300px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 0 0 10px 10px; }.c-input{
width: 80%;
margin: 20px 0;
position: relative;
display: flex;
flex-direction: row;
border-radius: 40px;}.c-icon{
width: 40px;
height: 40px;
background-color: #f3f3f3;
border-radius: 10px 0 0 10px;
padding: 10px;
box-sizing: border-box;}.c-img{
width: 100%;
height: 100%;}.c-inu{
width: calc(100% - 40px);
outline: none;
border:none;
font-size: 20px;
background-color: #f3f3f3;
border-radius: 0 10px 10px 0;}.c-btn{
width: 80%;
height: 40px;
border-radius: 40px;
border:none;
font-size: 16px;
color: #fff;
background-color: #5386ec;}</style></html>效果
使用scss 實(shí)現(xiàn)
<template>
<div class="container">
<div class="content">
<div class="c-top">
<h2>TAILWINDCSS-前端.火雞</h2>
</div>
<div class="c-bottom">
<div class="i-inu">
<div class="c-icon">
<img src="./assets/accout.png" />
</div>
<input type="text" />
</div>
<div class="i-inu">
<div class="c-icon">
<img src="./assets/pwd.png" />
</div>
<input type="password" />
</div>
<button class="c-btn">立即登陸</button>
</div>
</div>
</div></template><script setup></script><style lang="scss" scoped>
$baseColor: #5386ec;
$bgColor : #f3f3f3;
$baseUnitPx : 40px;
$whiteColor: #ffffff;
.common-flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.common-flex-col {
display: flex;
flex-direction: column;
}
.common-flex-row {
display: flex;
flex-direction: row;
}
.container {
background-color: #191d2d;
height: 100vh;
@extend .common-flex-center;
.content {
@extend .common-flex-col;
.c-top {
width: 400px;
height: 150px;
background-color: $baseColor;
color: $whiteColor;
@extend .common-flex-center;
}
.c-bottom {
width: 400px;
padding: 20px;
box-sizing: border-box;
background-color: $whiteColor;
@extend .common-flex-col;
align-items: center;
.i-inu {
@extend .common-flex-row;
margin: 20px 0;
width: 80%;
justify-content: center;
background-color: $bgColor;
border-radius: 10px;
.c-icon {
width: $baseUnitPx;
height: $baseUnitPx;
padding: 10px;
box-sizing: border-box;
img {
width: 100%;
height: 100%;
}
}
input {
width: calc(100% - $baseUnitPx);
outline: none;
font-size: 20px;
border: none;
background-color: $bgColor;
border-radius: 0 10px 10px 0;
}
}
.c-btn {
width: 80%;
height: $baseUnitPx;
border: none;
background-color: $baseColor;
font-size: 16px;
color: $whiteColor;
border-radius: $baseUnitPx;
}
}
}
}</style>效果
tailwindcss 實(shí)現(xiàn)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Login</title> </head> <body> <div class="flex h-screen w-full items-center justify-center bg-slate-900"> <div class="w-400 flex flex-col"> <div class="h-150 bg-custom-blue rounded-t-10 box-border flex items-center justify-center text-white"> <h2 class="text-f-z-20">TAILWINDCSS-前端.火雞</h2> </div> <div class="h-300 rounded-b-10 flex flex-col items-center justify-center bg-white"> <div class="my-5 flex w-80 flex-row items-center"> <div class="bg-f3 rounded-l-10 box-border flex h-40 w-40 items-center justify-center p-10"> <img class="h-full w-full" src="https://img-blog.csdnimg.cn/direct/89ef557241ea4d719ec140882e5ed00e.png#pic_center" alt="" /> </div> <input style="width: calc(100% - 40px);" class="text-f-z-20 bg-f3 rounded-r-10 h-40 outline-none" type="text" placeholder="accout" /> </div> <div class="my-5 flex w-80 flex-row items-center"> <div class="bg-f3 rounded-l-10 box-border flex h-40 w-40 items-center justify-center p-10"> <img class="h-full w-full" src="https://img-blog.csdnimg.cn/direct/249b4c14085a4076aaff70ac32922e9c.png#pic_center" /> </div> <input style="width: calc(100% - 40px);" class="text-f-z-20 bg-f3 rounded-r-10 h-40 outline-none" type="password" placeholder="password" /> </div> <button class="bg-custom-blue text-f-z-16 rounded-40 my-5 h-40 w-80 border-none text-white">立即登陸</button> </div> </div> </div> </body></html>
tailwind.config.js
/** @type {import('tailwindcss').Config} */export default {
theme: {
extend: {
width: {
400: '400px',
40: '40px',
},
height: {
40: '40px',
600: '600px',
150: '150px',
300: '300px',
},
colors: {
'custom-blue': '#5386ec',
},
fontSize: {
'f-z-16': '16px',
'f-z-20': '20px',
},
borderRadius: {
40: '40px',
10: '10px',
},
backgroundColor: {
f3: '#f3f3f3',
},
padding: {
10: '10px',
},
},
},
plugins: [],}效果：
注意： 上面的demo僅僅作為案例使用，沒有做任何注釋，也沒有做任何優(yōu)化，直接平鋪直敘的開發(fā)完，僅作參考
怎么看tailwindcss
tailwindcss其實(shí)改變了我們寫css的習(xí)慣，本質(zhì)就已經(jīng)改變了，他提供了大量的簡(jiǎn)寫形式給到我們，想快速的掌握這門css的技術(shù)，需要我們自己的css基本功，但是網(wǎng)上我也看了很多對(duì)tailwindcss的評(píng)價(jià)，褒貶不一，但是夸的還是相對(duì)多很多的，本質(zhì)的原因是很多人是愿意做出改變的，無可厚非的一個(gè)點(diǎn)是他確實(shí)可以提升我們開發(fā)css的效率，（雖然我寫上面的那個(gè)效果寫了幾個(gè)小時(shí)，我是一邊看文檔一邊寫），不過可以很明顯的感覺到他幫助我們省了大量的重復(fù)性的代碼，特別是多人開發(fā)的時(shí)候，
直觀感受
（以下僅為個(gè)人觀點(diǎn)，因?yàn)楸救藳]有使用tailwindcss進(jìn)行過大項(xiàng)目使用，所以見解可能比較膚淺）
優(yōu)點(diǎn)
代碼復(fù)用性極高
一鍵更換主題
開發(fā)效率大幅度提升（熟練之后）
不用糾結(jié)起類名的問題
啟動(dòng)清除無用代碼（網(wǎng)上說的，截止到發(fā)稿我沒有進(jìn)行相關(guān)實(shí)驗(yàn)）
…
缺點(diǎn)
樣式不直觀（都是類名，沒有原始css代碼）
調(diào)整不方便，耦合度較高（一些自定義的類樣式，同時(shí)在用的時(shí)候，只能新加，無法修改）
代碼維護(hù)性不高 （你們可以看看上面我寫的那些代碼，給你們維護(hù)的話，你們心里是什么感覺）
學(xué)習(xí)成本稍高（除非天天用，否則就是背誦對(duì)應(yīng)的簡(jiǎn)寫形式，安裝之后需要進(jìn)行對(duì)應(yīng)的配置，我個(gè)人使用的是在線開發(fā)工具）
寫到最后
怎么說呢？當(dāng)年vue剛出現(xiàn)的時(shí)候也是一樣的很多人排斥，開發(fā)者就是這樣，有人愿意做出改變，就有人不愿意改變自己的開發(fā)習(xí)慣，這個(gè)是沒有什么問題的，但是總要有人前進(jìn)，摸索，不然技術(shù)就會(huì)停滯不前，我對(duì)tailwindcss保持中立的態(tài)度，我會(huì)去嘗試在項(xiàng)目中使用，但是你說你不愿意用，我也不會(huì)一直給你推薦，因?yàn)檫@個(gè)東西和vue還是有本質(zhì)的區(qū)別，一個(gè)新的框架可以解決我們常規(guī)開發(fā)的痛點(diǎn)，比如操作dom的繁雜性高，頁面渲染不及時(shí)，發(fā)布包無法很好的做更新配置等等，但是css的痛點(diǎn)在我看來scss，less這些預(yù)編譯技術(shù)已經(jīng)解決的八八九九了，只要你使用的足夠熟練，你會(huì)發(fā)現(xiàn)scss是可以實(shí)現(xiàn)非常棒牛叉的效果的，而且復(fù)雜度其實(shí)并不高，另外就是tailwindcss在我看來就是一群有想法的人做出來的對(duì)css的簡(jiǎn)寫，當(dāng)然實(shí)現(xiàn)到目前的程度毋庸置疑，肯定是很難的，但是表象看確實(shí)如此,我看網(wǎng)上很多人瘋狂安利這個(gè)技術(shù)，當(dāng)然可能是我沒有完全學(xué)透這門技術(shù)導(dǎo)致的，我對(duì)著東西的看法目前僅僅是停留在提升開發(fā)效率上，但是和我自己儲(chǔ)存的css知識(shí)量來看，他反而有點(diǎn)拖慢我的進(jìn)度，見仁見智吧，我會(huì)和推薦tsc一樣，你用我會(huì)推薦，你不用我也不會(huì)覺得你不思進(jìn)取。文章來源：http://www.zghlxwxcb.cn/news/detail-790477.html
tailwindcss推薦指數(shù)
※※※ 三顆星文章來源地址http://www.zghlxwxcb.cn/news/detail-790477.html
到了這里，關(guān)于談?wù)凾ailwind CSS：實(shí)用優(yōu)先的 CSS 框架到底好不好?的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
