Astro Tailwind Config

NOTE: This package is experimental and is subject to change.

Installation

• Install

npm i @astrouxds/tailwind

• If you're not using the Astro Web Components, you'll need to Install Astro Design Tokens
  • npm i @astrouxds/tokens
  • In your project root: import '@astrouxds/tokens/dist/css/index.css'
• Install Tailwind in your project.
• Add the Astro Tailwind plugin

//tailwind.config.js
...
 plugins: [require('@astrouxds/tailwind')]
...

Usage

Reference Demo Site for a list of available colors and utilities.

For more detailed information, see our Design Token Documentation

Recommended Plugins

Tailwind doesn't support shadow parts out of the box so we highly recommend also installing this Tailwind Custom Elements Plugin