Tailwind theme for Oruga

Install

npm install @oruga-ui/theme-tailwind

or

yarn add @oruga-ui/theme-tailwind

Configure

import { createApp } from "vue";
import App from "./App.vue";

// import Oruga
import Oruga from "@oruga-ui/oruga-next";

// import Oruga Tailwind theme config
import { tailwindConfig } from "@oruga-ui/theme-tailwind";

// import Oruga Tailwind theme styling
import "@oruga-ui/theme-tailwind/style.css";

createApp(App).use(Oruga, tailwindConfig).mount("#app");

Please note, this package can be used without importing any other Oruga styling or theme.

Customization (SASS/SCSS)

Override default config

In case you want to replace the default style of a component you can override or add new classes changing tailwindConfig; more details about components customization on https://oruga-ui.com/documentation/configuration.html

import { createApp } from "vue";

import Oruga from "@oruga-ui/oruga-next";
import { tailwindConfig } from "@oruga-ui/theme-tailwind";

import "@oruga-ui/theme-tailwind/style.css";

const customThemeConfig = {
    ...tailwindConfig,
    checkbox: {
        override: true,
        rootClass: "checkbox",
    },
};

createApp(App).use(Oruga, customThemeConfig).mount("#app");

Contributors

Thank you to everyone involved for improving this project, day by day 💚

Complete list.

Credits

Logo designed by mouadTaoussi

License

Code released under MIT license.