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

• Node.js version >= 16.0.0 is required. We recommend using nvm to install the node version.

1nvm install 18 && nvm use 18

• tailwindcss version >= 3.0.0 is required.

1npm install -D tailwindcss postcss autoprefixer

Installation

• Install the package using npm. This package has peer dependencies on react, react-dom and react-router-dom.

1npm install @paalan/tailwind-ui

Quick Links

• Layouts
• Components
• Icons
• Colors
• Hooks
• Providers

Usage

• Import the tailwindConfig configuration from @paalan/tailwind-ui/config in your application. Copy the below content and paste it in your application tailwind.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.

1import { tailwindConfig } from '@paalan/tailwind-ui/config';
2
3/** @type {import('tailwindcss').Config} */
4const config = {
5  presets: [tailwindConfig],
6  // override tailwind config here if needed
7  theme: {},
8};
9
10export 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 application index.css file.

Note: If the index.css file is not exist in your src folder then create one, before paste the below content.

1@import '@paalan/tailwind-ui/styles.css';
2
3@tailwind base;
4@tailwind components;
5@tailwind utilities;

• Import the ThemeProvider component from @paalan/tailwind-ui/providers and wrap your application with it.

1
2import React from 'react';
3import ReactDOM from 'react-dom/client';
4import { ThemeProvider } from '@paalan/tailwind-ui/providers';
5
6import { App } from './App';
7import './index.css';
8
9const root = ReactDOM.createRoot(document.getElementById('root')!);
10
11const Root = () => {
12  return (
13    <React.StrictMode>
14      <ThemeProvider>
15        <App />
16      </ThemeProvider>
17    </React.StrictMode>
18  );
19};
20
21root.render(<Root />);

• Import the components you need from @paalan/tailwind-ui/components.

1import React, { useState } from 'react';
2
3import { Button } from '@paalan/tailwind-ui/components';
4import { useCounter } from '@paalan/tailwind-ui/hooks';
5import { Box, Text } from '@paalan/tailwind-ui/layouts';
6
7export const App = () => {
8  const [count, { increment, decrement }] = useCounter(0);
9  return (
10    <Box>
11      <Text mb="2">Count: {count}</Text>
12      <Button onClick={() => increment()} variant="outline" mr="2">
13        Increment
14      </Button>
15      <Button onClick={() => decrement()} variant="outline">
16        Decrement
17      </Button>
18    </Box>
19  );
20};

How to import the provider hooks

• Import the provider hooks you need from @paalan/tailwind-ui/providers.

1import React from 'react';
2
3import { Box, Text } from '@paalan/tailwind-ui/layouts';
4import { useTheme } from '@paalan/tailwind-ui/providers';
5
6export const App = () => {
7  const { theme } = useTheme();
8
9  return (
10    <Box>
11      <Text>Current theme is {theme}</Text>
12    </Box>
13  );
14};

How to import the general hooks

• Import the hooks you need from @paalan/tailwind-ui/hooks.

1import React from 'react';
2
3import { Button } from '@paalan/tailwind-ui/components';
4import { useToggle } from '@paalan/tailwind-ui/hooks';
5import { Box, Text } from '@paalan/tailwind-ui/layouts';
6
7export const App = () => {
8  const [isOn, toggle] = useToggle();
9
10  return (
11    <Box>
12      <Text>Current state is {isOn ? 'on' : 'off'}</Text>
13      <Button onClick={toggle}>Toggle</Button>
14    </Box>
15  );
16};

How to import the icons

• Import the icons you need from @paalan/tailwind-ui/icons.

1import { AccessibilityIcon } from '@paalan/tailwind-ui/icons';
2
3<AccessibilityIcon boxSize="4" />;