@paalan/tailwind-ui
v2.1.4
Published
This is a collection of React components and hooks that used tailwindcss as CSS framework.
Downloads
211
Maintainers
Readme
Paalan Tailwind UI
This is a collection of React components and hooks that used tailwindcss as CSS framework. You can checkout storybook website in here.
Pre Requisites
nvm install 18 && nvm use 18
- tailwindcss
version >= 3.0.0
is required.
npm install -D tailwindcss postcss autoprefixer
Installation
- Install the package using npm. This package has peer dependencies on
react
,react-dom
andreact-router-dom
.
npm install @paalan/tailwind-ui
Quick Links
Usage
- Import the
tailwindConfig
configuration from@paalan/tailwind-ui/config
in your application. Copy the below content and paste it in your applicationtailwind.config.js
file.
Note: If the tailwind.config.js
file is not exist in your root folder then create one, before paste the below content.
import { tailwindConfig } from '@paalan/tailwind-ui/config';
/** @type {import('tailwindcss').Config} */
const config = {
presets: [tailwindConfig],
// override tailwind config here if needed
theme: {},
};
export default config;
- Import the styles css file from
@paalan/tailwind-ui/styles.css
in your application. Copy the below content and paste it in your applicationindex.css
file.
Note: If the index.css
file is not exist in your src
folder then create one, before paste the below content.
@import '@paalan/tailwind-ui/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
- Import the
ThemeProvider
component from@paalan/tailwind-ui/providers
and wrap your application with it.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from '@paalan/tailwind-ui/providers';
import { App } from './App';
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root')!);
const Root = () => {
return (
<React.StrictMode>
<ThemeProvider>
<App />
</ThemeProvider>
</React.StrictMode>
);
};
root.render(<Root />);
- Import the components you need from
@paalan/tailwind-ui/components
.
import React, { useState } from 'react';
import { Button } from '@paalan/tailwind-ui/components';
import { useCounter } from '@paalan/tailwind-ui/hooks';
import { Box, Text } from '@paalan/tailwind-ui/layouts';
export const App = () => {
const [count, { increment, decrement }] = useCounter(0);
return (
<Box>
<Text mb="2">Count: {count}</Text>
<Button onClick={() => increment()} variant="outline" mr="2">
Increment
</Button>
<Button onClick={() => decrement()} variant="outline">
Decrement
</Button>
</Box>
);
};
How to import the provider hooks
- Import the provider hooks you need from
@paalan/tailwind-ui/providers
.
import React from 'react';
import { Box, Text } from '@paalan/tailwind-ui/layouts';
import { useTheme } from '@paalan/tailwind-ui/providers';
export const App = () => {
const { theme } = useTheme();
return (
<Box>
<Text>Current theme is {theme}</Text>
</Box>
);
};
How to import the general hooks
- Import the hooks you need from
@paalan/tailwind-ui/hooks
.
import React from 'react';
import { Button } from '@paalan/tailwind-ui/components';
import { useToggle } from '@paalan/tailwind-ui/hooks';
import { Box, Text } from '@paalan/tailwind-ui/layouts';
export const App = () => {
const [isOn, toggle] = useToggle();
return (
<Box>
<Text>Current state is {isOn ? 'on' : 'off'}</Text>
<Button onClick={toggle}>Toggle</Button>
</Box>
);
};
How to import the icons
- Import the icons you need from
@paalan/tailwind-ui/icons
.
import { AccessibilityIcon } from '@paalan/tailwind-ui/icons';
<AccessibilityIcon boxSize="4" />;