If you know Tailwind CSS, you already know how to use, customize and extend every component.
npm install tailwindcss-react-ui
import React from 'React'
import { Button } from 'tailwindcss-react-ui'
export default () => (
<Button>Default</Button>
<Button
bg="purple-600"
text="sm purple-100"
hover="bg-purple-700">
Customized
</Button>
<Button
bg="purple-600"
text="sm purple-100"
extend="cursor-not-allowed border-2 border-red-500">
Customized
</Button>
)
You can adjust components just changing it's default properties (check for each component's API), use the prop extend
(expects a string
separated by spaces) to apply any valid Tailwind CSS class in your config to add styles do the base component, or use it together with reset
(boolean) to clear all styles and extend yourself.
See the documentation for all available components
This will get you running the project and a live interface.
git clone git@github.com:estevanmaito/tailwindcss-react-ui.git
cd tailwindcss-react-ui
npm install
npm run dev
Then in another terminal, watch tests as you develop
npm run test:watch
When ready to commit something, run the linter and test for coverage (you can skip this as it will run automatically when you commit, but if theres something wrong with your code, you'll probably need to run the commands after)
npm run test:coverage
npm run lint
If there are errors with your lint, you can try to fix them automatically using
npm run lint:fix
When ready, add it to git and instead of git commit
, run
npm run cz
This will present you with some questions that will result in a standard commit that will later be used to build and publish this package.
Then you're ready to PR.