docs(tailwind): Update tailwind-css.mdx (shuding#2888)

* docs(tailwind): Update tailwind-css.mdx Add guidance to integrate with TailwindCSS * fix: show filename for codeblock component * fix: remove unused highlight keywords * Apply suggestions from code review * Update docs/pages/docs/guide/advanced/tailwind-css.mdx --------- Co-authored-by: Dimitri POSTOLOV <[email protected]>
87xie · Sep 12, 2024 · 208f74f · 208f74f
1 parent 0565efd
commit 208f74f
Showing 1 changed file with 19 additions and 0 deletions.
diff --git a/docs/pages/docs/guide/advanced/tailwind-css.mdx b/docs/pages/docs/guide/advanced/tailwind-css.mdx
@@ -24,3 +24,22 @@ module.exports = {
   plugins: []
 }
 ```
+
+Next step, create a CSS file for Tailwind directives, `globals.css` for example:
+
+```css filename="globals.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Then import into `pages/_app.jsx`
+
+```jsx filename="_app.jsx"
+import "../path/to/your/globals.css"
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+