@choiceform/tailwind-config

Sharable tailwindcss configurations

Usage no npm install needed!

<script type="module">
  import choiceformTailwindConfig from 'https://cdn.skypack.dev/@choiceform/tailwind-config';
</script>

README

@choiceform/tailwind-config

@choiceform/tailwind-config 旨在提供一个带有预设配置的 tailwindcss 环境,并允 许使用者覆盖预设配置或定义新的配置。它自带了最新版本的 tailwindcss 以及 tailwindcss-interaction-variants, 为的是提供足够的便利性,但如果对特定的版本有需要也可以在使用方的项目中自行安装。

使用方法

@choiceform/tailwind-config 只提供预设配置和覆盖配置的机制,自身并不限定与特定 的框架或构建工具整合,用户可以将其用在任何项目架构和环境下。

以下的示例都假定 tailwindcss 的配置文件位于项目根目录下,名叫 tailwind.config.js;

若要使用 @choiceform/tailwind-config,只需在配置文件里写下:

module.exports = require("@choiceform/tailwind-config")({
  // 这里可以覆盖默认配置或追加项目需要的自定义配置
});

之后与不同的构建系统搭配使用即可,详情见下面的例子:

Webpack

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        use: [
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: [
                require("tailwindcss")(
                  path.join(__dirname, "tailwind.config.js")
                ),
              ],
            },
          },
        ],
      },
    ],
  },
};

如果项目是使用 postcss.config.js 配置文件来配置 PostCSS 的,那么可以在其中以插 件的方式集成 tailwindcss:

module.exports = {
  plugins: [require("tailwindcss")(path.join(__dirname, "tailwind.config.js"))],
};