如何调整Tailwind CSS的范围

问题描述

当在不希望其在全局范围内应用且可与自定义构建选项一起使用的系统中包含顺风CSS时，我找不到一种确定范围的好方法。

基本上我想这样做：

extension EncodingError {
  /// `invalidValue` without having to pass a `Context` as an argument.
  static func invalidValue(
    _ value: Any,codingPath: [CodingKey],debugDescription: String = .init()
  ) -> Self {
    .invalidValue(
      value,.init(
        codingPath: codingPath,debugDescription: debugDescription
      )
    )
  }
}

但是PostCSS导入器不喜欢这样做，因为它是在替换顺风占位符之前导入的。因此，使其正常工作的唯一方法是将构建分为两个阶段，然后导入已编译的CSS，如下所示：

.tailwind{
    @import "tailwindcss/base";

    @import "tailwindcss/components";

    @import "tailwindcss/utilities";
}

它可以工作，但它破坏了开发工具中显示的某些CSS规则。

是否有更好的方法来限制顺风范围以阻止其干扰其他系统？

解决方法

我发现您可以为此使用 postcss-nested。安装插件，将它作为第一个插件添加到你的 PostCSS 配置文件中，这应该可以工作：

.tailwind {
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    @tailwind screens;
}

,

您将通过将 tailwind 配置中的 important 设置为您的父类或 ID 来实现这一点。见docs。

// tailwind.config.js
module.exports = {
  important: '.tailwind',}

不幸的是，这似乎只影响了 components 和 utilities 样式……base 样式将不受影响。

,

From the docs ...

prefix选项允许您向Tailwind的所有生成的实用程序类添加自定义前缀。当在可能存在命名冲突的现有CSS上分层放置Tailwind时，这真的很有用。

例如，您可以通过设置prefix选项来添加tw-前缀，如下所示：

// tailwind.config.js
module.exports = {
  prefix: 'tw-',}

,

按要求在此留下我的答案：

我使用了 Lanny 建议的前缀

options("rgdal_show_exportToProj4_warnings"="none")
library(rgdal)
library(sp)

## Shapefile has a projection of WGS84
X <- readOGR(dsn=".",layer="myshapefile.shp")
UTM30 <- sf::st_crs(32630)$proj4string

transf <- spTransform(X,UTM30)

############################################################
### This warning gets repeated tens to hundreds of times ###

proj_as_proj_string: C:\PostgreSQL\13\share\contrib\postgis-3.1\proj\proj.db lacks DATABASE.LAYOUT.VERSION.MAJOR / DATABASE.LAYOUT.VERSION.MINOR metadata. It comes from another PROJ installation.
proj_as_wkt: C:\PostgreSQL\13\share\contrib\postgis-3.1\proj\proj.db lacks DATABASE.LAYOUT.VERSION.MAJOR / DATABASE.LAYOUT.VERSION.MINOR metadata. It comes from another PROJ installation.
proj_create: C:\PostgreSQL\13\share\contrib\postgis-3.1\proj\proj.db lacks DATABASE.LAYOUT.VERSION.MAJOR / DATABASE.LAYOUT.VERSION.MINOR metadata. It comes from another PROJ installation.

然后像这样制作我的顺风 css 文件：

// tailwind.config.js
module.exports = {
  prefix: 'tw-',}

然后我只是手动将我想要的任何基本样式手动复制到我的主 css 文件中，并手动更改任何冲突的内容。