当前位置:   article > 正文

uni-app 使用 tailwindcss_uniapp tailwindcss

uniapp tailwindcss

tailwindcss 中文文档
windicss 英文文档

我是通过vue-cli创建的项目,HBuilderX没有试过,这里介绍使用vue-cli创建的项目,可查看官方文档。这里有两种配置方式(重置主题和重命名类),目的都是考虑兼容性,您可根据实际情况处理。英文

vue create -p dcloudio/uni-preset-vue my-project

1️⃣ 重置主题

安装依赖

npm install tailwindcss@npm:@tailwindcss/postcss7-compat -D

配置 tailwindcss

在项目根目录创建tailwind.config.js文件,用于配置tailwindcss

// tailwind.config.js
module.exports = {
  purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false,
  separator: '__', // 兼容小程序,将 : 替换成 __
  theme: {
    // 兼容小程序,将默认配置里带 .和/ 清除
    // 如果有些属性你没有用到,请在 corePlugins 里禁用
    extend: {},
    fontSize: {},
    height: {},
    inset: {},
    screens: {},
    spacing: {},
    translate: {},
    width: {}
  },
  variants: {},
  plugins: [],
  corePlugins: {
    // 兼容小程序,将带有 * 选择器的插件禁用
    preflight: false,
    space: false,
    divideColor: false,
    divideOpacity: false,
    divideStyle: false,
    divideWidth: false
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

配置 postcss

在根目录的postcss.config.js中的plugins属性添加引入。注意要放在@dcloudio/vue-cli-plugin-uni/packages/postcss之前,非小程序端才能将rpx转换。

// postcss.config.js
const path = require('path')
module.exports = {
  parser: require('postcss-comment'),
  plugins: [
    require('postcss-import')({
      resolve(id) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else 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('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

2️⃣ 重命名类

这里和重置主题配置不同是,不重置默认的配置,而是将配置中类名带.和/替换其他兼容字符。

安装依赖

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss-class-rename -D

配置 tailwindcss

// tailwind.config.js
module.exports = {
  purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false,
  separator: '__', // 兼容小程序,将 : 替换成 __
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [],
  corePlugins: {
    // 兼容小程序,将带有 * 选择器的插件禁用
    preflight: false,
    space: false,
    divideColor: false,
    divideOpacity: false,
    divideStyle: false,
    divideWidth: false
  }
}
配置 postcss
// postcss.config.js
const path = require('path')
module.exports = {
  parser: require('postcss-comment'),
  plugins: [
    require('postcss-import')({
      resolve(id) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    }),
    require('tailwindcss'),
    require('postcss-class-rename')({
      '\\\\.': '_' // 兼容小程序,将类名带 .和/ 替换成 _
    }),
    require('autoprefixer')({
      remove: process.env.UNI_PLATFORM !== 'h5'
    }),
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

⚠ 引入 tailwindcss

配置完成后我们引入tailwindcss,注意不要在main.js中引入,因为APP端无效,需要在App.vue中引入。

<style>
@import url('tailwindcss/tailwind.css');
</style>
  • 1
  • 2
  • 3

兼容小程序版

安装相关依赖:

这是我项目的依赖给大家参考一下:
在这里插入图片描述

安装tailwindcss

安装的是兼容版的:详细安装请移步>>> tailwindcss官网-安装

在这里插入图片描述

1.安装tailwindcss
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  • 1
2.初始化配置文件
npx tailwindcss-cli@latest init
  • 1

这步会生成tailwindcss.config文件

除此外请自行安装上图其他依赖

配置tailwindcss

到这里项目录应该是这样的:
在这里插入图片描述

引入taiwindcss

在src 目录新建 style 文件夹并创建tailwind.css
在tailwind.css 中写入

@tailwind base;
@tailwind components;
@tailwind utilities;
  • 1
  • 2
  • 3

在这里插入图片描述

main.js里面引用
import "@/style/tailwind.css"
  • 1

将这段覆盖tailwindcss.config.js

module.exports = {
  // Tree-shake unused styles in production build
  // purge: ['./src/**/*.{vue,js,ts,jsx,tsx,html}'],
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    // Disable breakpoints
    screen: {}
  },
  variants: {
    extend: {},
  },
  plugins: [],
  corePlugins: {//禁用一些小程序class不支持的分割
    space: false,
    divideWidth: false,
    divideColor: false,
    divideStyle: false,
    divideOpacity: false,
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
postcss.config.js中写入,通过postcss-class-rename将小程序不支持的分割替换掉如:w-3/4中的/

⚠这步很重要 否则就会报如下错误
在这里插入图片描述

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))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    }),
   
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),
    require("tailwindcss")({ config: "./tailwind.config.js" }),
      /* ******* 引入tailwindcss ******* */
      // // 根据平台差异进行不同的样式处理
      ...(
        process.env.UNI_PLATFORM !== "h5"
          ? [
            // 使用postcss-class-name 包将小程序不支持的类名写法转换为支持的类名,如:"hover:xxx"
            require("postcss-class-rename")({
              "\\\\:": "--",
              "\\\\/": "--",
              "\\\\.": "--",
              ".:": "--",
              "\\\*": "--",
            })
          ]
          : [
            require("autoprefixer")({
              remove: true,
            }),
          ]
      ),

    
  ]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

tsconfig.json配置

{
  "compilerOptions": {
    "types": [
      "@dcloudio/types",
      "miniprogram-api-typings",
      "mini-types"
    ],
    "baseUrl": ".",
   "paths": {
     "@/*": ["src/*"]
   }
 },
 "exclude": ["node_modules", "dist"]
  
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/839870
推荐阅读
相关标签
  

闽ICP备14008679号