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

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

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

$ 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

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

/* Extend the theme below */
...

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:

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

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

You can then use your custom variables throughout your application:

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

For more details on theme customization, check out the Tailwind CSS Theme Documentation.

Publishing

Publishing changes to @under-io/tailwind follows an automated workflow using Changesets and our repository pipeline.

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

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.

License

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

@under-io/tailwind is part of the Under family of projects.