Update structure

README.md

@@ -14,27 +14,24 @@ or
 yarn add @gryt/ui @tailwindcss/typography tailwind daisyui
 ```
 
-## Usage
-
-### Button
-
-```tsx
-// somePage.tsx
-import React, { Component } from 'react'
+### Tailwind preset
 
-import Button from '@gryt/ui'
+```ts
+// tailwind.config.js
 
-class Example extends Component {
-  render() {
-    return <Button>Click me!</Button>
-  }
+module.exports = {
+  presets: [
+    require('@gryt/ui/tailwind')
+  ],
+  // ...
 }
 ```
 
-### Add styling (including tailwind config)
+### Styling
 
 ```tsx
 // _app.tsx
+
 import { AppProps } from 'next/app';
 import "@gryt/ui/src/styles/globals.scss";
 
@@ -43,6 +40,26 @@ function MyApp({ Component, pageProps }: AppProps<{ initialSession: Session }>)
 }
 ```
 
+## Usage
+
+### Button
+
+```tsx
+// somepage.tsx
+
+import React, { Component } from 'react'
+import Button from '@gryt/ui'
+
+export default function SomePage() {
+  return (
+      <div>
+        <h1 className="text-2xl font-bold text-primary">Welcome!</h1>
+        <Button>Click me!</Button>
+      </div>
+  );
+}
+```
+
 ## License
 
 MIT © [Gryt-chat](https://github.com/Gryt-chat)

src/styles/globals.scss → style.scss

@@ -1,5 +1,3 @@
-@config "./tailwind.js";
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tsconfig.json

@@ -2,10 +2,7 @@
   "compilerOptions": {
     "outDir": "dist",
     "module": "esnext",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "moduleResolution": "node",
     "jsx": "react",
     "sourceMap": true,
@@ -28,12 +25,6 @@
     "isolatedModules": true,
     "noEmit": true
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "example"
-  ]
+  "include": ["src", "tailwind.js", "tailwind.js"],
+  "exclude": ["node_modules", "dist", "example"]
 }