React tailwind UI components
npm install kaze-uiComponent library that extends your tailwind config to provide powerful responsive layouts that don't rely on media queries.
1. Install
```
npm i kaze-ui
2. Configure tailwind.config.js
`
const {kaze} = require('kaze-ui/config');
module.exports = kaze({
purge: [],
theme: {
extend: {},
}
variants: {},
plugins: [],
});
`
3. Wrap your app with the Kaze theme provider
`
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Kaze } from 'kaze-ui'
ReactDOM.render(
document.getElementById('root')
)
`
1. Extend the styles of the components.
Here is an example styles directory. In this example we will style the Box component
``
styles/
┣ components/
┃ ┗ Box.ts
┗ index.ts
Export the Box component from styles/index.ts
`
import Box from './components/Box';
export default {
components: {
Box,
},
};
`
Add a theme to the Box component
`Box
export default {
base: 'rounded', // Add a border radius to all of the componentsBox
// Create variants for the component`
variants: {
red: 'bg-red-400',
blue: 'bg-blue-400',
purple: 'bg-purple-400',
green: 'bg-green-400'
}
};
Provide the theme to your Kaze provider
`
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Kaze } from 'kaze-ui'
import theme from "../styles";
ReactDOM.render(
document.getElementById('root')
)
`
Use a Box component with a variant
`
import React from 'react';
import { Box } from 'kaze-ui';
const IndexPage: React.FC
return (
Test Box component
);
}
``