@roots/bud-tailwindcss

Adds tailwindcss support to Bud

• Requirements
• Installation
• Usage
• Configuration
  • Parameters
    • tailwindConfig
    • implementation
• Contributing
• Bud sponsors
• Community

Requirements

If you haven't already installed @roots/bud-postcss you'll need to do that first.

yarn add @roots/bud-postcss postcss --dev

Installation

Install your choice of tailwindcss or @tailwindcss/jit to your project.

yarn add @roots/bud-tailwindcss @tailwindcss/jit --dev

Usage

Add the extension to your config:

bud.use(["@roots/bud-postcss", "@roots/bud-tailwindcss"]);

Again, take note that @roots/bud-postcss is required to utilize @roots/bud-tailwindcss.

You should now be good to utilize tailwind in your @roots/bud-tailwindcss project. You may use it with scss or postcss.

yarn bud publish @roots/bud-tailwindcss tailwind.config.js

Configuration

You may use the bud.tailwind function to apply further customizations to your project. This is totally optional.

bud.tailwind(config, implementation);

Parameters

tailwindConfig

Specify a custom path to your tailwind config:

bud.tailwind(budpath("project", "path/to/config.js"));

You can also provide your tailwind config as an object, should you prefer.

bud.tailwind({
  theme: ({ theme }) => ({
    colors: {},
  }),
});

implementation

Additionally, you may use the second parameter to specify if you prefer to use tailwindcss or @tailwindcss/jit (in case you have both installed in your modules directory):

bud.tailwind(config, "@tailwindcss/jit");

Contributing

Contributions are welcome from everyone.

We have contributing guidelines to help you get started.

Bud sponsors

Help support our open-source development efforts by becoming a patron.

Community

Keep track of development and community news.

• Participate on the Roots Discourse
• Follow @rootswp on Twitter
• Read and subscribe to the Roots Blog
• Subscribe to the Roots Newsletter
• Listen to the Roots Radio podcast