tailwindcss
下面介紹一下在uni-app中使用，咱根據(jù)文檔摸索前進(jìn)
安裝依賴
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 postcss-class-rename --dev
配置
- 根目錄下創(chuàng)建tailwind.config.js文件,兼容小程序部分的配置來源于文末的參考資料
module.exports = {
purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
separator: '__', // 兼容小程序，將 : 替換成 __
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
corePlugins: {
// 兼容小程序情臭，將帶有 * 選擇器的插件禁用
preflight: false,
space: false,
divideColor: false,
divideOpacity: false,
divideStyle: false,
divideWidth: false,
},
};
- 修改postcss.config.js文件內(nèi)容灌危，最終配置如下
const path = require('path');
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3));
}
if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2));
}
if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1));
}
return id;
},
}),
// ---------------------新增----------------------------------
require('tailwindcss'),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5',
}),
// --------------新增-------------------------------
require('postcss-class-rename')({
'\\\\.': '_', // 兼容小程序卤妒，將類名帶 .和/ 替換成 _
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),
],
};
- 在 App.vue中加入引入 tailwindcss的代碼（在main.js 里面引入的話打包才成App會(huì)不生效Ｑ被鳌Ｏ跚濉Ｎ萏贰）
<style>
/* tailwindcss */
@import 'tailwindcss/tailwind.css';
</style>
使用
<view>
<text class="text-xl font-bold text-red-500">tailwindcss</text>
</view>
image.png
