加入了tailwind編譯很慢如何解決？

[yudan215]

加入了tailwind編譯很慢如何解決？

[xlzy520]

可以更新一下 我现在把postcss 里的purge注释掉了

[xlzy520]

我当时加这个是为了清除uview没有使用到的css，这个可以在生产环境下开启

[yudan215]

刚试过关闭了会报 ` 46040 | 46041 | @media (min-width: 1536px) {

46042 | .\32xl--container { | ^ 46043 | width: 100% 46044 | } 46045 | `

[xlzy520]

贴一下你的postcss

[yudan215]

`const path = require('path') const purgecss = require('postcss-purgecss')

module.exports = { syntax: 'postcss-scss', 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')({ config: './tailwind.config.js' }), require('@dcloudio/vue-cli-plugin-uni/packages/postcss'), purgecss({ content: ['.//*.vue', './*/.wxml', './/*.html'], css: ['*/.wxss', '*/.css'], }), require('autoprefixer')({ remove: process.env.UNIPLATFORM !== 'h5' }), require('postcss-class-rename')({ '\\:': '--', '\\/': '', }), ] } `

[xlzy520]

刚试过关闭了会报 ` 46040 | 46041 | @media (min-width: 1536px) {

46042 | .\32xl--container { | ^ 46043 | width: 100% 46044 | } 46045 | `

我现在这个postcss和tailwindcss mp-weixin配置更新了， 你可以重新拉一下项目更新一下这两个文件

[xlzy520]

const path = require('path')
const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  syntax: 'postcss-scss',
  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
      },
    }),
    // purgecss({
    //   content: ['./**/*.vue', './**/*.wxml', './**/*.html'],
    //   css: ['**/*.wxss', '**/*.css'],
    // }),
    require('autoprefixer')({
      remove: process.env.UNI_PLATFORM !== 'h5',
    }),
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),
    require('tailwindcss')({ config: './tailwind.config.js' }),
    require('postcss-class-rename')({
      '\\\\:': '--',
      '\\\\/': '_',
    })
  ],
}

[yudan215]

对比了下好像没差别啊

[xlzy520]

purgecss({
content: ['.//*.vue', './/.wxml', './**/.html'],
css: ['/*.wxss', '/*.css'],
}),

你这里没有注释掉呀

[xlzy520]

[yudan215]

我就是说注释了这里就报那个错误了

[yudan215]

[xlzy520]

不会的，我项目一直都是正常启动的，你可以重启一下项目

[xlzy520]

不会的，我项目一直都是正常启动的，你可以重启一下项目

因为你还有媒体查询吧，tailwindcss配置我也更新了

[xlzy520]

你把这个项目再拉一遍跑一次看看？

[yudan215]

估计是我改了tailwind的配置

[xlzy520]

[yudan215]

`const isH5 = process.env.UNI_PLATFORM === 'h5'

module.exports = { purge: { content: ['./src/*/.vue', './src/*/.wxml'], }, darkMode: 'class', // or 'media' or 'class' // corePlugins: { // space: false, // divideWidth: false, // divideColor: false, // divideStyle: false, // divideOpacity: false, // }, corePlugins: [ isH5 ? 'preflight' : 'container', 'alignContent', 'alignItems', 'backgroundColor', 'backgroundPosition', 'backgroundRepeat', 'backgroundSize', 'borderColor', 'borderRadius', 'borderStyle', 'borderWidth', 'boxSizing', 'clear', 'display', 'fill', 'flex', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'fontSize', 'fontWeight', 'height', 'inset', 'justifyItems', 'justifyContent', 'lineHeight', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'objectFit', 'objectPosition', 'opacity', 'overflow', 'position', 'padding', 'placeholderColor', 'placeholderOpacity', 'rotate', 'scale', 'tableLayout', 'textAlign', 'textColor', 'textDecoration', 'textOverflow', 'textTransform', 'transform', 'transformOrigin', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'translate', 'userSelect', 'verticalAlign', 'visibility', 'whitespace', 'width', 'wordBreak', 'zIndex' ], // variants: { // accessibility: [], // alignContent: [], // alignItems: [], // alignSelf: [], // appearance: [], // backgroundAttachment: [], // backgroundColor: ['dark', 'active', 'disabled'], // backgroundPosition: [], // backgroundRepeat: [], // backgroundSize: [], // borderCollapse: [], // borderColor: [], // borderRadius: [], // borderStyle: [], // borderWidth: [], // boxShadow: [], // cursor: [], // display: [], // fill: [], // flex: [], // flexDirection: [], // flexGrow: [], // flexShrink: [], // flexWrap: [], // float: [], // fontFamily: [], // fontSize: [], // fontSmoothing: [], // fontStyle: [], // fontWeight: [], // height: [], // inset: [], // justifyContent: [], // letterSpacing: [], // lineHeight: [], // listStylePosition: [], // listStyleType: [], // margin: [], // maxHeight: [], // maxWidth: [], // minHeight: [], // minWidth: [], // objectFit: [], // objectPosition: [], // opacity: ['disabled'], // order: [], // outline: [], // overflow: [], // padding: [], // placeholderColor: [], // pointerEvents: [], // position: [], // resize: [], // stroke: [], // tableLayout: [], // textAlign: [], // textColor: ['dark', 'active'], // textDecoration: [], // textTransform: [], // userSelect: [], // verticalAlign: [], // visibility: [], // whitespace: [], // width: [], // wordBreak: [], // zIndex: [], // }, theme: { spacing: { full: '100%', 1: '4rpx', 2: '8rpx', '5px': '5rpx', '6px': '6rpx', '10px': '10rpx', '14px': '14rpx', '15px': '15rpx', '18px': '18rpx', 4: '16rpx', 5: '20rpx', 6: '24rpx', 7: '28rpx', '30px': '30rpx', 10: '40rpx', 11: '44rpx', 12: '48rpx', '70px': '70rpx', 19: '76rpx', 20: '80rpx', }, borderRadius: { full: '100%', '2px': '2rpx', '3px': '3rpx', '5px': '5rpx', '35px': '35rpx', }, borderWidth: { DEFAULT: '1px', 2: '2px', b: '' }, colors: { white: '#ffffff', primary: '#00BD92', orange: '#FF5102', 'light-gray': '#F6F6F6', gray: '#888888', border: '#e6e6e6', }, fontSize: { xs: '20rpx', sm: ['24rpx', { lineHeight: '33rpx' }], base: ['28rpx', { lineHeight: '40rpx' }], lg: ['32rpx', { lineHeight: '40rpx' }], }, // minHeight: { // 0: '0upx', // full: '100%', // screen: '100vh', // }, // outline: { // none: ['4upx solid transparent', '4upx'], // white: ['4upx dotted white', '4upx'], // black: ['4upx dotted black', '4upx'], // }, // extend: {}, }, plugins: [], } `

[xlzy520]

都不对，是这里的问题

[xlzy520]

你再对比一下，这是我的

[xlzy520]

\\四个哦

[yudan215]

是四个·github转义了·我用你的tailwind就不会报错

[yudan215]

不知道是哪里的配置影响了

[xlzy520]

可以把你的项目让我跑一下看看

[yudan215]

screens: false, 找到了·我没这个

[xlzy520]

我上面都截图这个。