Coder Social home page Coder Social logo

space-y-3 space-x-3 这类写法不起作用问题的参考,与外层套view标签,或者 virtualHost 解决方案 about weapp-tailwindcss HOT 5 CLOSED

sonofmagic avatar sonofmagic commented on May 10, 2024
space-y-3 space-x-3 这类写法不起作用问题的参考,与外层套view标签,或者 virtualHost 解决方案

from weapp-tailwindcss.

Comments (5)

sonofmagic avatar sonofmagic commented on May 10, 2024

560e2ffa91fd07a6ca00fe3ea7d6dbd
这个是字节小程序的代码片段:https://developer.open-douyin.com/ide/minicode/MCrg6Qq

然后我在抖开平台的小程序社区找到了反馈:https://developer.open-douyin.com/forum/mini-app/post/625655d3806b24d2e4dbe214

字节在生产模式下处理空格有问题

微信小程序是ok的,虽然字节小程序几乎和微信一个模板API啥的几乎一模一样,但是他们好像没有优化到这个点,咱们的tailwindcss插件没啥问题,转换正确
b78c02f66206150131372e1689df89a

另外就是还有一种曲线救国的方案,当然这个是在taro工程里,使用Px或者PX,也就是space-y-[12PX],这样taro在编译的时候,taro内置的postCSS插件将不处理这个转换操作,达到效果

from weapp-tailwindcss.

sonofmagic avatar sonofmagic commented on May 10, 2024

理论上只要配置taro 的 css 压缩选项 csso ,不压缩空格即可

https://taro-docs.jd.com/docs/config-detail#cssminimizer

https://github.com/css/csso#minifysource-options

from weapp-tailwindcss.

gaokun avatar gaokun commented on May 10, 2024

我这边发现在小程序上, 也不好用了.

其他的class都正常, 就space的不行. 压根不生成

image

from weapp-tailwindcss.

sonofmagic avatar sonofmagic commented on May 10, 2024

考虑到小程序的组件(shadow root)实现方式,默认情况下 space 这一类带有子选择器的,只对 view 元素生效

推荐组件使用 <view> 标签包裹组件

还有图上你下面是2个组件的父元素上使用的 space class,要看是否生效可以看子项中第2个元素和后面元素:

image

from weapp-tailwindcss.

gaokun avatar gaokun commented on May 10, 2024

是的, 确实是因为我的children是自定义组件, 导致的这个问题
image

在自定义组件中添加
options: { virtualHost: true, } 即可解决此问题.

from weapp-tailwindcss.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.