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"))],
};