Skip to content

T
test
Commit bb64adb1 by zhuxichen
Options

chore: update tailwind

parent ac9b1aa6
Showing with 199 additions and 131 deletions
config/index.ts
import Components from 'unplugin-vue-components/webpack'; import Components from 'unplugin-vue-components/webpack';
import NutUIResolver from '@nutui/nutui-taro/dist/resolver'; import NutUIResolver from '@nutui/nutui-taro/dist/resolver';
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack');
const config = { const config = {
projectName: 'testApp', projectName: 'testApp',
date: '2024-1-31', date: '2024-1-31',
designWidth (input) { designWidth(input) {
if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) { if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
return 375 return 375;
} }
return 750 return 750;
}, },
deviceRatio: { deviceRatio: {
640: 2.34 / 2, 640: 2.34 / 2,
750: 1, 750: 1,
828: 1.81 / 2, 828: 1.81 / 2,
375: 2 / 1 375: 2 / 1,
}, },
sourceRoot: 'src', sourceRoot: 'src',
outputRoot: 'dist', outputRoot: 'dist',
plugins: ['@tarojs/plugin-html'], plugins: ['@tarojs/plugin-html'],
defineConstants: { defineConstants: {},
},
copy: { copy: {
patterns: [ patterns: [],
], options: {},
options: {
}
}, },
framework: 'vue3', framework: 'vue3',
compiler: { compiler: {
type: 'webpack5', type: 'webpack5',
prebundle: { enable: false } prebundle: { enable: false },
}, },
sass:{ sass: {
data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";` data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`,
}, },
mini: { mini: {
webpackChain(chain) { webpackChain(chain) {
chain.plugin('unplugin-vue-components').use(Components({ chain.plugin('unplugin-vue-components').use(
resolvers: [NutUIResolver({taro: true})] Components({
})) resolvers: [NutUIResolver({ taro: true })],
})
);
chain.merge({
plugin: {
install: {
plugin: UnifiedWebpackPluginV5,
args: [
{
appType: 'taro',
},
],
},
},
});
}, },
postcss: { postcss: {
pxtransform: { pxtransform: {
enable: true, enable: true,
config: { config: {
// selectorBlackList: ['nut-'] // selectorBlackList: ['nut-']
} },
}, },
url: { url: {
enable: true, enable: true,
config: { config: {
limit: 1024 // 设定转换尺寸上限 limit: 1024, // 设定转换尺寸上限
} },
}, },
cssModules: { cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: { config: {
namingPattern: 'module', // 转换模式，取值为 global/module namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]' generateScopedName: '[name]__[local]___[hash:base64:5]',
} },
} },
} htmltransform: {
enable: true,
// 设置成 false 表示 不去除 * 相关的选择器区块
// 假如开启这个配置，它会把 tailwindcss 整个 css var 的区域块直接去除掉
config: {
removeCursorStyle: false,
},
},
},
}, },
h5: { h5: {
webpackChain(chain) { webpackChain(chain) {
chain.plugin('unplugin-vue-components').use(Components({ chain.plugin('unplugin-vue-components').use(
resolvers: [NutUIResolver({taro: true})] Components({
})) resolvers: [NutUIResolver({ taro: true })],
})
);
}, },
publicPath: '/', publicPath: '/',
staticDirectory: 'static', staticDirectory: 'static',
...@@ -75,23 +96,22 @@ const config = { ...@@ -75,23 +96,22 @@ const config = {
postcss: { postcss: {
autoprefixer: { autoprefixer: {
enable: true, enable: true,
config: { config: {},
}
}, },
cssModules: { cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: { config: {
namingPattern: 'module', // 转换模式，取值为 global/module namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]' generateScopedName: '[name]__[local]___[hash:base64:5]',
} },
} },
} },
} },
} };
module.exports = function (merge) { module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev')) return merge({}, config, require('./dev'));
} }
return merge({}, config, require('./prod')) return merge({}, config, require('./prod'));
} };
package.json
{ {
"name": "testApp", "name": "testApp",
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"description": "11", "description": "11",
"templateInfo": { "templateInfo": {
"name": "vue3-NutUI4", "name": "vue3-NutUI4",
"typescript": true, "typescript": true,
"css": "Stylus", "css": "Stylus",
"framework": "Vue3" "framework": "Vue3"
}, },
"scripts": { "scripts": {
"build:weapp": "taro build --type weapp", "postinstall": "weapp-tw patch",
"build:swan": "taro build --type swan", "build:weapp": "taro build --type weapp",
"build:alipay": "taro build --type alipay", "build:swan": "taro build --type swan",
"build:tt": "taro build --type tt", "build:alipay": "taro build --type alipay",
"build:h5": "taro build --type h5", "build:tt": "taro build --type tt",
"build:rn": "taro build --type rn", "build:h5": "taro build --type h5",
"build:qq": "taro build --type qq", "build:rn": "taro build --type rn",
"build:jd": "taro build --type jd", "build:qq": "taro build --type qq",
"build:quickapp": "taro build --type quickapp", "build:jd": "taro build --type jd",
"dev:weapp": "npm run build:weapp -- --watch", "build:quickapp": "taro build --type quickapp",
"dev:swan": "npm run build:swan -- --watch", "dev:weapp": "npm run build:weapp -- --watch",
"dev:alipay": "npm run build:alipay -- --watch", "dev:swan": "npm run build:swan -- --watch",
"dev:tt": "npm run build:tt -- --watch", "dev:alipay": "npm run build:alipay -- --watch",
"dev:h5": "npm run build:h5 -- --watch", "dev:tt": "npm run build:tt -- --watch",
"dev:rn": "npm run build:rn -- --watch", "dev:h5": "npm run build:h5 -- --watch",
"dev:qq": "npm run build:qq -- --watch", "dev:rn": "npm run build:rn -- --watch",
"dev:jd": "npm run build:jd -- --watch", "dev:qq": "npm run build:qq -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch" "dev:jd": "npm run build:jd -- --watch",
}, "dev:quickapp": "npm run build:quickapp -- --watch"
"browserslist": [ },
"last 3 versions", "browserslist": [
"Android >= 4.1", "last 3 versions",
"ios >= 8" "Android >= 4.1",
], "ios >= 8"
"author": "", ],
"dependencies": { "author": "",
"@babel/runtime": "^7.7.7", "dependencies": {
"@nutui/icons-vue-taro": "^0.0.9", "@babel/runtime": "^7.7.7",
"@nutui/nutui-taro": "^4.2.9", "@nutui/icons-vue-taro": "^0.0.9",
"@tarojs/components": "3.6.23", "@nutui/nutui-taro": "^4.2.9",
"@tarojs/helper": "3.6.23", "@tarojs/components": "3.6.23",
"@tarojs/plugin-framework-vue3": "3.6.23", "@tarojs/helper": "3.6.23",
"@tarojs/plugin-html": "3.6.23", "@tarojs/plugin-framework-vue3": "3.6.23",
"@tarojs/plugin-platform-alipay": "3.6.23", "@tarojs/plugin-html": "3.6.23",
"@tarojs/plugin-platform-h5": "3.6.23", "@tarojs/plugin-platform-alipay": "3.6.23",
"@tarojs/plugin-platform-jd": "3.6.23", "@tarojs/plugin-platform-h5": "3.6.23",
"@tarojs/plugin-platform-qq": "3.6.23", "@tarojs/plugin-platform-jd": "3.6.23",
"@tarojs/plugin-platform-swan": "3.6.23", "@tarojs/plugin-platform-qq": "3.6.23",
"@tarojs/plugin-platform-tt": "3.6.23", "@tarojs/plugin-platform-swan": "3.6.23",
"@tarojs/plugin-platform-weapp": "3.6.23", "@tarojs/plugin-platform-tt": "3.6.23",
"@tarojs/runtime": "3.6.23", "@tarojs/plugin-platform-weapp": "3.6.23",
"@tarojs/shared": "3.6.23", "@tarojs/runtime": "3.6.23",
"@tarojs/taro": "3.6.23", "@tarojs/shared": "3.6.23",
"vue": "^3.2.40" "@tarojs/taro": "3.6.23",
}, "vue": "^3.2.40",
"devDependencies": { "weapp-tailwindcss": "^3.0.8"
"@babel/core": "^7.8.0", },
"@tarojs/cli": "3.6.23", "devDependencies": {
"@tarojs/taro-loader": "3.6.23", "@babel/core": "^7.8.0",
"@tarojs/webpack5-runner": "3.6.23", "@tarojs/cli": "3.6.23",
"@types/node": "^18.15.11", "@tarojs/taro-loader": "3.6.23",
"@types/webpack-env": "^1.13.6", "@tarojs/webpack5-runner": "3.6.23",
"@typescript-eslint/eslint-plugin": "^5.20.0", "@types/node": "^18.15.11",
"@typescript-eslint/parser": "^5.20.0", "@types/webpack-env": "^1.13.6",
"@vue/babel-plugin-jsx": "^1.0.6", "@typescript-eslint/eslint-plugin": "^5.20.0",
"@vue/compiler-sfc": "^3.2.40", "@typescript-eslint/parser": "^5.20.0",
"babel-preset-taro": "3.6.23", "@vue/babel-plugin-jsx": "^1.0.6",
"css-loader": "3.4.2", "@vue/compiler-sfc": "^3.2.40",
"eslint": "^8.12.0", "autoprefixer": "^10.4.17",
"eslint-config-taro": "3.6.23", "babel-preset-taro": "3.6.23",
"eslint-plugin-vue": "^8.0.0", "css-loader": "3.4.2",
"style-loader": "1.3.0", "eslint": "^8.12.0",
"stylelint": "9.3.0", "eslint-config-taro": "3.6.23",
"ts-node": "^10.9.1", "eslint-plugin-vue": "^8.0.0",
"typescript": "^4.1.0", "postcss": "^8.4.33",
"unplugin-vue-components": "^0.23.0", "postcss-rem-to-responsive-pixel": "^6.0.1",
"vue-loader": "^17.0.0", "style-loader": "1.3.0",
"webpack": "^5.78.0" "stylelint": "9.3.0",
} "tailwindcss": "^3.4.1",
} "ts-node": "^10.9.1",
"typescript": "^4.1.0",
"unplugin-vue-components": "^0.23.0",
"vue-loader": "^17.0.0",
"webpack": "^5.78.0"
}
}
\ No newline at end of file
postcss.config.js 0 → 100644
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-rem-to-responsive-pixel': {
// 32 意味着 1rem = 32rpx
rootValue: 16,
// 默认所有属性都转化
propList: ['*'],
// 转化的单位,可以变成 px / rpx
transformUnit: 'px',
},
},
}
src/app.styl
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
\ No newline at end of file
src/pages/index/index.vue
<template> <template>
<view class="index"> <view class="index text-gray-400">
<view> <view>
<img src="" alt=""> <img src="" alt="" />
</view> </view>
{{ msg }} <Dongdong /> <view class="index text-gray-400"> {{ msg }} <Dongdong /> </view>
<view class="btn"> <view class="btn">
<nut-button type="primary" @click="handleClick('text', msg2, true)">点我</nut-button> <nut-button type="primary" @click="handleClick('text', msg2, true)"
>点我</nut-button
>
</view> </view>
<nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover"/> <nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover" />
</view> </view>
</template> </template>
...@@ -17,7 +19,7 @@ import { Dongdong } from '@nutui/icons-vue-taro'; ...@@ -17,7 +19,7 @@ import { Dongdong } from '@nutui/icons-vue-taro';
export default { export default {
name: 'Index', name: 'Index',
components: { components: {
Dongdong Dongdong,
}, },
setup() { setup() {
const state = reactive({ const state = reactive({
...@@ -25,7 +27,7 @@ export default { ...@@ -25,7 +27,7 @@ export default {
msg2: '你成功了～', msg2: '你成功了～',
type: 'text', type: 'text',
show: false, show: false,
cover: false cover: false,
}); });
const handleClick = (type, msg, cover = false) => { const handleClick = (type, msg, cover = false) => {
...@@ -37,15 +39,15 @@ export default { ...@@ -37,15 +39,15 @@ export default {
return { return {
...toRefs(state), ...toRefs(state),
handleClick handleClick,
} };
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.index { .index {
font-family: "Avenir", Helvetica, Arial, sans-serif; font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
......
tailwind.config.js 0 → 100644
/** @type {import('tailwindcss').Config} */
const range = (size) =>
Object.fromEntries(
[...Array(size).keys()]
.slice(1)
.map((i) => [`${i}_${size}`, `${(i / size) * 100}%`])
);
module.exports = {
// 这里给出了一份 taro 通用示例，具体要根据你自己项目的目录结构进行配置
// 比如你使用 vue3 项目，你就需要把 vue 这个格式也包括进来
// 不在 content glob表达式中包括的文件，在里面编写tailwindcss class，是不会生成对应的css工具类的
content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
// 其他配置项 ...
corePlugins: {
// 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发多端，你应该使用 process.env.TARO_ENV 环境变量来控制它
preflight: false,
},
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment