tailwind_companion_react_useTailwind_hook_quickstart_example.ts

1import React from 'react';
2import { useTailwind } from 'tailwind-companion-react';
3
4const QuickStartComponent: React.FC = () => {
5  // Initialize the tailwind companion hook
6  const tw = useTailwind();
7
8  return (
9    <div className={tw('flex flex-col items-center justify-center min-h-screen bg-gray-100')}>
10      <h1 className={tw('text-4xl font-bold text-blue-600 mb-4')}>
11        Hello, Tailwind Companion!
12      </h1>
13      <p className={tw('text-lg text-gray-700')}>
14        This is a quickstart example using TypeScript.
15      </p>
16      <button
17        className={tw(
18          'mt-6 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300'
19        )}
20      >
21        Click Me
22      </button>
23    </div>
24  );
25};
26
27export default QuickStartComponent;