astro-windi 💨

This Astro integration brings Windi CSS's utility CSS classes to every .astro file and framework component in your project.

• Why Windi
• Installation
• Usage
• Configuration
• Examples
• Troubleshooting
• Contributing
• Changelog

Why Windi?

Windi CSS is fully compatible with Tailwind CSS v2. On top of that, Windi CSS has many additional features that boost your productivity further and open up many more possibilities.

If you don't like the predefined settings, you can customize the Windi CSS configuration file to your project's design requirements.

Installation

Quick Install

The astro add command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.

# Using NPM
npx astro add astro-windi
# Using Yarn
yarn astro add astro-windi
# Using PNPM
pnpm astro add astro-windi

If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.

Manual Install

First, install the astro-windi and windicss packages using your package manager. If you're using npm or aren't sure, run this in the terminal:

npm install astro-windi windicss

Then, apply this integration to your astro.config.* file using the integrations property:

astro.config.mjs

import { defineConfig } from 'astro/config';
import windi from 'astro-windi';

export default defineConfig({
  // ...
  integrations: [windi()],
});

Usage

When you install the integration, Windi CSS's utility classes should be ready to go right away. Head to the WindiCSS docs to learn how to use Windi CSS, and if you see a utility class you want to try, add it to any HTML element to your project!

Configuration

Configuring Windi CSS

If you used the Quick Install instructions and said yes to each prompt, you'll see a windi.config.js file in your project's root directory. Use this file for your Windi CSS configuration changes. You can learn how to customize Windi CSS using this file in the Windi CSS docs.

If it isn't there, you add your own windi.config.(js|cjs|mjs) file to the root directory and the integration will use its configurations. This can be great if you already have Windi CSS configured in another project and want to bring those settings over to this one.

Examples

• The Astro WindiCSS Starter gets you up and running with a base for your project that uses WindiCSS for styling

Troubleshooting

Others

• If your installation doesn't seem to be working, try restarting the dev server.
• If you edit and save a file and don't see your site update accordingly, try refreshing the page.
• If refreshing the page doesn't update your preview, or if a new installation doesn't seem to be working, then restart the dev server.

For help, check out the #support channel on Discord.

You can also check our Astro Integration Documentation for more on integrations.

Contributing

This package is maintained by pep108. You're welcome to submit an issue or PR!

Changelog

See CHANGELOG.md for a history of changes to this integration.