Nuxt/Vue项目中用Tailwind实现容器内flickity轮播左对齐且撑满屏幕右边缘

你可以通过负右外边距结合视口单位实现需求，无需修改现有DOM结构：

1. 直接使用Tailwind v3 任意值写法 #

直接给Carousel组件添加以下类即可：

<Carousel class="mr-[calc(50%_-_50vw)] overflow-x-visible"/>

实现原理： #

• mr-[calc(50%_-_50vw)]：50% 取父级container的宽度的一半，50vw 取当前视口宽度的一半，两者相减得到的负值右外边距，会将轮播组件的右侧直接拉伸到视口右边缘，同时左侧位置保持和容器内其他内容对齐。
• overflow-x-visible 保证轮播组件的内容超出容器部分可以正常展示。

2. Tailwind v2 兼容写法 #

如果你使用的是不支持任意值的旧版本Tailwind，可以先在全局CSS中注册自定义工具类：

@layer utilities {
  .break-right-to-edge {
    margin-right: calc(50% - 50vw);
  }
}

之后给Carousel组件添加类即可：

<Carousel class="break-right-to-edge overflow-x-visible"/>

注意事项 #

你现有代码的container类存在冲突：container mx-auto mx-10 中mx-10会覆盖mx-auto的居中效果，如果你是想给容器加左右内边距，建议修改为container mx-auto px-10。

内容的提问来源于stack exchange，提问作者Maxime