英文:
renaming tailwindcss class that interferes with another library
问题
以下是翻译好的部分：
"我有一个使用tailwindCSS构建的项目，需要包含来自其他库的外部CSS，这些CSS会干扰一些tailwind类。实际上，我已经找到了一些问题的解决方法，但仍然无法解决.container类的问题。
我知道我可以在tailwind类中使用前缀（从tailwind配置文件中设置），但这意味着我必须更改所有已使用的tailwind类，这对于项目规模如此之大来说并不是一个合理的解决方案。我也不能更改来自另一个库使用的类的名称（必须通过CDN加载）。所以我能想到的唯一解决方案是重命名tailwind的.container类。我尝试了类似这样的方法：
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
className: 'my-container',
},
},
variants: {},
plugins: [],
};
但似乎不起作用，我在文档中也找不到任何信息。
有什么建议吗？"
英文:
I have a project built with tailwindCSS and i need to include external css from other library which interferes with some of the tailwind classes. Actually i have found workaround for some of the issues, but still cannot resolve the problem with the .container class.
I know i can use prefix in tailwind classes (setting it from tailwind config file), but that means i will have to change all used tailwind classes which is not reasonable solution knowing how big is the project. I also cannot change the name of the class that is used from another library (it has to be loaded via CDN). So the only solution i can think of is renaming the tailwind .container class. I tried something like this:
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
className: 'my-container',
},
},
variants: {},
plugins: [],
};
but it doesn't seem to work and I cannot find anything in the docs.
Any ideas?
答案1
得分: 0
以下是翻译好的部分：
"你现在可能想要做的是这样："
"https://play.tailwindcss.com/QUMCP8zmD4?file=css"
@tailwind base;
@tailwind components;
@tailwind utilities;
.containerAlias {
@apply container
}
这将基本上为你创建.container的别名，而不会添加冲突的类，但也不会禁止任何人使用它。
如果上述方法不起作用，也许可以考虑自定义插件，但我不确定你是否可以自定义核心插件。这就是你尝试的方法不起作用的原因。在默认主题中，.container只是一个空对象。".container"现在是一个核心插件。
英文:
What you probably want to do then is this:
https://play.tailwindcss.com/QUMCP8zmD4?file=css
@tailwind base;
@tailwind components;
@tailwind utilities;
.containerAlias {
@apply container
}
It will basically alias the .container for you without adding the conflicting class, but won't disallow anyone from using it either.
Maybe a custom plugin if the above does not work. but I am not you can customize corePlugins. This it the reason what you are trying to do does not work. The container is just an empty object in the default theme. ".container" is a core plugin now.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论