uniapp 中使用tailwindcss

tailwindcss

下面介绍一下在uni-app中使用,咱根据文档摸索前进

安装依赖

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 postcss-class-rename --dev

配置

  • 根目录下创建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文件内容,最终配置如下
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会不生效!!!)
<style>
/* tailwindcss */
@import 'tailwindcss/tailwind.css';
</style>

使用

<view>
  <text class="text-xl font-bold text-red-500">tailwindcss</text>
</view>
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容