npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@choiceform/tailwind-config

v1.0.0-rc.25

Published

Sharable tailwindcss configurations

Downloads

88

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