Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/needim/radix-ui-themes-with-tailwind
Radix UI Themes Integration with Tailwind CSS
https://github.com/needim/radix-ui-themes-with-tailwind
radix-ui tailwind tailwindcss
Last synced: 2 months ago
JSON representation
Radix UI Themes Integration with Tailwind CSS
- Host: GitHub
- URL: https://github.com/needim/radix-ui-themes-with-tailwind
- Owner: needim
- License: mit
- Created: 2023-08-21T15:40:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-28T22:33:46.000Z (12 months ago)
- Last Synced: 2024-10-14T12:17:56.087Z (2 months ago)
- Topics: radix-ui, tailwind, tailwindcss
- Language: TypeScript
- Homepage: http://ned.im/radix-ui-themes-with-tailwind/
- Size: 902 KB
- Stars: 47
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Radix UI Themes Integration with Tailwind CSS
## Key Features
- **Tailwind Color Naming**: You have the option to utilize the Tailwind naming convention for colors and radius helpers. This means you can still use familiar classes like `bg-red-500` and `bg-blue-500`, which will be linked to corresponding Radix colors.
- **Color Token Mapping**: Another optional feature allows you to map missing color tokens from Tailwind to Radix colors. For example, you can map tailwind `zinc` to radix `sand` and tailwind `neutral` to radix `sage`, enabling a seamless transition between the two color systems.
## Usage
```bash
pnpm install radix-ui-themes-with-tailwind -D
```
or
```bash
npm install radix-ui-themes-with-tailwind -D
```
or
```bash
yarn add radix-ui-themes-with-tailwind -D
```
then in your `tailwind.config.js` or `tailwind.config.ts` file:
```js
import radixThemePlugin from "radix-ui-themes-with-tailwind";
export default {
darkMode: ["class"],
content: [],
theme: {
extend: {},
},
plugins: [
radixThemePlugin({
useTailwindColorNames: true, // optional
useTailwindRadiusNames: true, // optional
mapMissingTailwindColors: true, // optional
}),
],
};
```
## Frequently Asked Questions
**What Are Radix Themes?**
Radix Themes serve as a styled and opinionated component library built on top of the Radix UI primitives. They are designed to expedite project initiation with pre-designed, extensively tested components. (source: [Radix UI Twitter](https://twitter.com/radix_ui/status/1692574289860477432))
**Is This Plugin Necessary for Using Radix Themes?**
No, the plugin is not mandatory. If you're accustomed to Tailwind and prefer not to use Radix Themes' layout utilities (such as ``, ``, ``), you can still develop using Tailwind classes (e.g., `className="flex items-center gap-2"`).
## Acknowledgements
- [Radix UI Themes](https://www.radix-ui.com/)
- [Radix UI Colors](https://www.radix-ui.com/colors)
- [Tailwind CSS](https://tailwindcss.com/)