Installation
Installing Tailwind CSS for Vite and React
To integrate Tailwind CSS into your Vite-based React.js app, follow the installation steps outlined in the Tailwind CSS documentation for Vite (opens in a new tab).
Installing Avishka-UI
You need to install Avishka-UI, and you can do so using npm, yarn, or pnpm.
# npm
npm install avishka-ui
# yarn
yarn add avishka-ui
# pnpm
pnpm install avishka-ui
Configuring for a Vite and React.js App
To set up a Vite-based React.js app, start by configuring your tailwind.config.js file with the following additions.
tailwind.confing.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}"
"./node_modules/avishka-ui/dist/**/*.{js,ts}",
],
theme: {
extend: {
colors: {
btn: {
primary: {
DEFAULT: "#000",
foreground: "#fff",
},
secondary: {
DEFAULT: "#f4f4f5",
foreground: "#000",
},
danger: {
DEFAULT: "#ef4444",
foreground: "#fff",
},
disabled: {
DEFAULT: "#d3d3d3",
foreground: "#808080",
},
},
badge: {
primary: {
DEFAULT: "#000",
foreground: "#fff",
},
secondary: {
DEFAULT: "#f4f4f5",
foreground: "#000",
},
danger: {
DEFAULT: "#ef4444",
foreground: "#fff",
},
},
alert: {
primary: {
DEFAULT: "#fff",
foreground: "#fff",
},
danger: {
DEFAULT: "#ef4444",
foreground: "#ef4444",
},
},
avatar: {
primary: {
DEFAULT: "#fff",
foreground: "#000",
},
},
card: {
DEFAULT: "#fff",
foreground: "#000",
},
},
},
},
plugins: [],
};