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.

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 and react-router-dom.

npm 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.

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 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.

@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" />;