介紹
那么我們先介紹一下什么時(shí)TailwindCSS是什么呢。
TailwindCSS
跟 CSS有什么差別呢，最大的差別就是在 TailwindCSS ?中無(wú)需創(chuàng)建很多的 CSS 頁(yè)面，都寫(xiě)在 元素的 class 屬性中，因?yàn)?/p>
?TailWindCSS棒我們已經(jīng)寫(xiě)好了對(duì)應(yīng)的CSS樣式的庫(kù)我們只需按照原子化的 屬性來(lái)進(jìn)行定義即可，你可能又有疑問(wèn)了 這個(gè)是不是跟
Bootstrap 一樣，其實(shí)差不多，但是 TailwindCSS
是定制度更高，就是你可以按照你自己的需要進(jìn)行更改而不是寫(xiě)詞一個(gè)組件讓你使用，支持高度自定義。
TailWindCSS
現(xiàn)在也已經(jīng)來(lái)到了 3.4.x 的版本了，已經(jīng)迭代了很多次，算是很穩(wěn)定了，現(xiàn)在很多公司都在使用中，我這邊也是自從用上 TailWindCSS
后效率直接猛增，雖然很多廠商還沒(méi)有完全投入使用 TailWindCSS，這邊也是如果需要高度自定的部分的話還得使用 CSS 來(lái)實(shí)現(xiàn)。
提高效率神器之TailWindCSS
說(shuō)來(lái)說(shuō)去為師什么是高效是個(gè)不錯(cuò)的話題，用到這玩意兒就能提高開(kāi)發(fā)效率？
很多人都會(huì)有這個(gè)疑問(wèn)，我最初也是這樣想，但是用了后發(fā)現(xiàn)哎別說(shuō)你真別說(shuō)，這效率提升的不是一般的快呀，現(xiàn)在我們使用的都是通過(guò)
Vue 或者 React 來(lái)開(kāi)發(fā)，因?yàn)檫@兩種給你開(kāi)發(fā)都是使用組件化的方式開(kāi)發(fā)的所以這個(gè)也會(huì)提升效率但是除了這個(gè)以外在 CSS 中編寫(xiě)50行代碼
， 可能在 TailWindCSS 中只不用用到那么多CSS??，使用 TailWindCSS
中是寫(xiě)是有很多的定義來(lái)寫(xiě)的雖然縮短了行數(shù)但代碼寬度很長(zhǎng)了，下面就是一個(gè)簡(jiǎn)單看一下一個(gè)原子化的屬性等于原CSS中的那些代碼。
比如說(shuō)是毛玻璃狀態(tài)配置的backdrop-blur 就是一個(gè)案例如果我們只是這么一些可能有些瀏覽器是不支持這個(gè) backdrop-blur 所以我們還得配置每個(gè)內(nèi)核不一樣瀏覽器之間的體驗(yàn)也要考慮下面就是默認(rèn)帶出來(lái)的格式。
? <div class="card backdrop-blur-md">
? ? <button type="button" @click="count++">count is {{ count }}</button>
? ? <p>
? ? ? Edit
? ? ? <code>components/HelloWorld.vue</code> to test HMR
? ? </p>
? </div>
這個(gè)代碼就是使用了 TailWindCSS的代碼了，直接使用這個(gè) 這個(gè) backdrop-blur-md class屬性來(lái)配置了毛玻璃的效果，如果使用傳統(tǒng)CSS來(lái)寫(xiě)的話得這么寫(xiě)。
.backdrop-blur-md {
? ? --tw-backdrop-blur: blur(12px);
? ? -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
? ? backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
這里就是適配瀏覽器，我們?nèi)绻謱?xiě)CSS的話要考慮到的內(nèi)容這么多但是使用了 TailWindCSS 后就不需要考慮，我們只添加一個(gè)屬性即可實(shí)現(xiàn)上面CSS樣式中的內(nèi)容，雖然說(shuō)是沒(méi)提升很多，但是你這么寫(xiě)下去一個(gè)頁(yè)面的CSS樣式可能有個(gè)8、9百行，這個(gè)工作量就是不聽(tīng)的寫(xiě)，但這個(gè)上面不一樣直接在元素中定義當(dāng)然可以在config 文件中添加自己自定義的內(nèi)容即可實(shí)現(xiàn)高度自定義定制，可以使用白暗切換啥的，很快就實(shí)現(xiàn)，最大的差距可以看官方這個(gè)文檔 在這里就是詳細(xì)的講了優(yōu)勢(shì)，當(dāng)然有優(yōu)勢(shì)也有缺點(diǎn)，需要不停的學(xué)習(xí)，其實(shí)跟CSS一樣，但官方可能也考慮到了這一點(diǎn)給編輯器提供了插件可以提示你正在寫(xiě)的原子化VScode 插件 。
大家可以根據(jù)下面的圖片就可以看到效果這里的 bg 是 ?background 的縮寫(xiě)然后 - 后就是選了個(gè)顏色，這個(gè)在css中寫(xiě)的就是 background-color:balck; 我的效率提升就是這里的提升。顏色可以在 config 文件設(shè)置好。
通過(guò)上面的案例你可能在想這不還是跟Bootstrap一樣的想過(guò)嘛，但你看到下面的案例你就懂了，高度定制。
比如我們添加一個(gè)動(dòng)畫(huà)，直接在class屬性中添加動(dòng)畫(huà)，下面是添加的代碼截圖，這里我就是添加了一些樣式現(xiàn)在咱們看一下代碼。
初學(xué)者可能對(duì)這些代碼很陌生但是看一下也能很好的理解，現(xiàn)在我們看一下效果是怎么樣的，下圖演示效果，這里是因?yàn)?Gif 圖片的原因（不是動(dòng)畫(huà)在卡）
uniapp上安裝 tailwindcss
上面主要介紹了一下tailwindcss為什么是提高效率神器，現(xiàn)在給大家講解 uniapp 中安裝 tailwindcss 。
首先我們通過(guò) uniapp 的官方教程創(chuàng)建一個(gè) uniapp 項(xiàng)目我在這里演示的只是Vue3/Vite+ uniapp 下面是對(duì)應(yīng)的安裝命令
這里演示 TypeScript版本
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
如果安裝失敗，直接下載官方安裝好的模板，在 gitee中開(kāi)源，鏈接是vue3/vite + typescript + uniapp
現(xiàn)在就是大家已經(jīng)安裝好了的狀態(tài)了，咱們把下載下來(lái)的壓縮文件 .zip 解壓在我們放項(xiàng)目的目錄中然后使用HBuilderX 開(kāi)發(fā)工具來(lái)打開(kāi)目錄的方式打開(kāi)下載下來(lái)的項(xiàng)目，如果你使用上面的命令來(lái)安裝的話那就是直接在那個(gè)目錄里了?，F(xiàn)在就是安裝 TailWindCSS的部分在剛才的目錄中打開(kāi) cmd 命令行，輸入npm 命令即可安裝，下面是對(duì)應(yīng)的 npm 命令，點(diǎn)擊這里直達(dá)安裝教程
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
在 App.vue 文件的公共 CSS 部位添加添加這三行，引入 tailwindcss 庫(kù)，注：style標(biāo)簽中的scoped 需要?jiǎng)h除，不然不是全局CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
安裝好以后可以直接使用了，下面是安裝的教程，演示一下。
還有就是因?yàn)閠ialwindcss使用的 rem 換成 rpx ,我看了一下好像不用換也是可以的。(tailwind.config.js)
presets: [
require('tailwindcss-rem2px-preset').createPreset({
? // 32 意味著 1rem = 32rpx
? fontSize: 32,
? // 轉(zhuǎn)化的單位,可以變成 px / rpx
? unit: 'rpx'
})
],
開(kāi)始使用
配置這些完成后可以在小程序模擬器上進(jìn)行看到效果了，這里簡(jiǎn)單演示一下，字體變紅。
這里大概就結(jié)尾了，uniapp + tailwindcss 的簡(jiǎn)單教程，個(gè)人講解還是有缺陷，如果大家感興趣可以去官方詳細(xì)看看，下面是上面提到的關(guān)鍵詞的官方文檔：
謝謝您閱讀到這里，希望對(duì)你有幫助
