@roots/bud-tailwindcss

Overview

Adds tailwindcss support to @roots/bud projects.

• Requirements
• Installation
• Usage
• Configuration
  • Parameters
  • config
  • implementation

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 project. You may use it with scss or postcss.

If you need a tailwindcss config file to get started with you may also pull one into your project with the bud publish command:

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

• config: a path to your config file, or a config object.
• implementation: either 'tailwindcss' or '@tailwindcss/jit'

config

Specify a custom path to your tailwind config:

bud.tailwind(bud.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" // or 'tailwindcss',
);

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