Design System for Troo
npm install trooui@radix-ui lib's components are used as base cuz it provides rich accessibility and all the other SEO related attributes easily for all of it's components, which rapids the development of a design system.tailwindcss is used for css as it's easy to write classnames rather than whole css, later if we want to switch to vanilla css or css-in-js, we can do that easily as all of our components are modular, we can do that one-by-one.rollup is used to bundle our components into a final package which can be used by all the other applications.typescript is used to provide type-safety everywhere. we can later use flow to save ts-overhead.tailwindcss for tailwindcss \postcss for building css \autoprefixer for css compatibility across different browsers \react for react code \react-dom for react code \lucide-react for icons. \
bun add trooui tailwindcss postcss autoprefixer
`
For npm users
`
npm i trooui tailwindcss postcss autoprefixer
`
For yarn users
`
yarn add trooui tailwindcss postcss autoprefixer
`
For pnpm users
`
pnpm add trooui tailwindcss postcss autoprefixer
`Usage
Ya need to first generate tailwindcss config and for that ya can use this command:
`
bunx tailwindcss init -p
`then ya need to import trooui's css in your index.css or any global css file
index.css should look like this
`
@import "trooui/styles"
`and in tailwind.config.js use trooui's tailwindPlugin
`
import trooui from 'trooui/styles'export default {
content: [
"node_modules/trooui/dist/*/.js", //this's needed cuz i'm not including the generated css in the package
"src/*/.jsx", //your project files which uses tailwindcss
"index.html" //your project's starting point
],
plugins: [trooui] //use of this plugin attaches the base styles of trooui to tailwind to be consumed by the project.
}
``