@under-io/tailwind/README.md

Under engineering Tailwind configuration

<a name="readme-top"></a>

<!-- PROJECT LOGO -->
<br />
<div align="center">
  <a href="https://under.io">
    <img src="https://assets-global.website-files.com/651c689e4d564732c9cbe9ec/6539093da716523a452427b4_under-footer-icon-bg.svg" alt="Logo" width="80" height="80">
  </a>

  <h2 align="center">@under-io/tailwind</h2>

  <p align="center">
    A Tailwind config designed to help efficiently scaffold Under Engineering projects
    <br />
    <br />
    <a href="#">Report Bug</a>
    ·
    <a href="#">Request Feature</a>
  </p>
</div>

<!-- TABLE OF CONTENTS -->
<details>
  <summary>Table of Contents</summary>
  <ol>
    <li><a href="#implementation">Implementation</a></li>
    <li><a href="#getting-started">Getting Started</a></li>
    <li><a href="#installation">Installation</a></li>
    <li><a href="#extending-the-theme">Extending the Theme</a></li>
    <li><a href="#publishing">Publishing to npm</a></li>
    <li><a href="#license">License</a></li>
  </ol>
</details>

<!-- IMPLEMENTATION -->

## Implementation

By utilizing this shared Tailwind CSS configuration, developers can maintain a consistent design system across multiple projects, ensuring a unified look and feel without the need to manually configure styles for each codebase. This centralized approach simplifies development by providing a pre-configured setup that enforces design consistency, optimizes utility classes, and aligns with best practices. With this shared Tailwind configuration, teams can streamline their workflow, reduce redundant setup efforts, and focus more on building features rather than managing styles. Ultimately, this promotes a scalable and maintainable front-end architecture, fostering better collaboration and efficiency across projects.

<!-- GETTING STARTED -->

## Getting Started

Implementing the Tailwind configuration into your project is a quick and straightforward process. Start by installing the package along with its required dependencies. Then, import the shared styles into your application’s main stylesheet.

<!-- INSTALLATION -->

### Installation

To get started, run the following command in your project directory:

```sh
$ npm install --save-dev @under-io/tailwind tailwindcss tw-animate-css
```

Once installed, include the shared styles at the top of your application’s stylesheet:

**styles.css**

```css
@import '@under-io/tailwind/src/index.css';

/* Extend the theme below */
...
```

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- EXTENDING THE THEME -->

## Extending The Theme

Tailwind CSS allows you to customize and extend the default theme using the `@theme` directive. This makes it easy to modify colors, spacing, typography, and more directly within your CSS files without altering your Tailwind configuration.

To extend the theme, use the `@theme` directive inside your stylesheet:

Run the following command in the root of the repository:

```css
@import '@under-io/tailwind/src/index.css';

@theme {
  --color-muted: #838587;
}
```

You can then use your custom variables throughout your application:

```jsx
<p className='text-muted text-xs'>test</p>
```

For more details on theme customization, check out the [Tailwind CSS Theme Documentation][Tailwind-docs].

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- PUBLISHING -->

## Publishing

Publishing changes to `@under-io/tailwind` follows an automated workflow using [Changesets](https://github.com/changesets/changesets) and our repository pipeline.

When you've finished making changes, run the Changeset CLI to generate a new version bump:

```sh
npm run changeset
```

_This will prompt you to describe the change and determine whether it's a **patch**, **minor**, or **major** update._

Then commit and push the changes, including the generated changeset file. Once the PR is created, the pipeline takes over and handles publishing to npm automatically.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- LICENSE -->

## License

Distributed under the MIT License. See `LICENSE.txt` for more information.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

`@under-io/tailwind` is part of the [Under](https://under.io/) family of projects.

[Tailwind-docs]: https://tailwindcss.com/docs/theme