Skip to content

Commit

Permalink
Update integration tutorials (#1817)
Browse files Browse the repository at this point in the history
  • Loading branch information
@juujisai
juujisai authored Jul 21, 2023
1 parent c4467ae commit fb8f5b7
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 62 deletions.
220 changes: 166 additions & 54 deletions site/content/docs/standard/integrations/next/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,61 @@ <h2 class="text-lg font-bold">Step 1</h2>
Installing and configuring Tailwind CSS and Tailwind Elements
</h2>

<p class="mb-2">If you have created a new next app, depending on the chosen options, your file structure could look like this:</p>

<div
class="mb-4 rounded-md border-l-[6px] border-solid border-blue-600 bg-blue-100 p-2.5 dark:border-white dark:bg-gray-500 ">
<strong>Note:</strong> Options used while creating the app: Typescript - <code>Yes</code>, ESLint - <code>Yes</code>, `src/` directory - <code>Yes</code>, App Router - <strong>both</strong> examples included in this tutorial
</div>

<div class="pb-4">
<!--prettier-ignore-->
{{< twsnippet/wrapper "with App Router,without App Router" "" "mobile" >}}
{{< twsnippet/code active=true lang="plaintext" >}}
my-project/
├── node_modules/
├── public/
├── src/
│ ├── pages/ - needs to be created
│ ├── app/
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── index.css
│ ├── ...
│ └── index.js
├── package-lock.json
├── package.json
├── next.config.js
├── tsconfig.config.js
├── ...
└── tailwind.config.js
{{< /twsnippet/code >}}
{{< twsnippet/code lang="plaintext" >}}
my-project/
├── node_modules/
├── public/
├── src/
│ ├── pages/
│ ├──── app/
│ │ ├── _app.tsx
│ │ ├── _document.tsx
│ │ └── index.tsx
│ └── styles/
│ └── globals.css
├── package-lock.json
├── package.json
├── next.config.js
├── tsconfig.config.js
├── ...
└── tailwind.config.js
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>

<!-- Description -->
<h2 class="mt-5 text-lg font-bold">Step 1</h2>
<h2 class="text-lg font-bold">Step 1</h2>
<p class="mb-5">Install Tailwind CSS</p>

<div class="pb-4">
Expand Down Expand Up @@ -125,7 +178,7 @@ <h2 class="text-lg font-bold">Step 2</h2>
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./node_modules/tw-elements/dist/js/**/*.js"
"./node_modules/tw-elements/dist/js/**/*.js",

// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
Expand All @@ -143,8 +196,8 @@ <h2 class="text-lg font-bold">Step 2</h2>

<h2 class="text-lg font-bold">Step 3</h2>
<p class="mb-5">
Add the <code>@tailwind</code> directives for each of Tailwind’s layers to
your <code>./src/styles/global.css</code> file.
Add the <code>@tailwind</code> directives for each of Tailwind's layers to
your <code>./src/app/globals.css</code> or <code>./src/styles/globals.css</code> file.
</p>

<div class="pb-4">
Expand All @@ -159,32 +212,62 @@ <h2 class="text-lg font-bold">Step 3</h2>
</div>

<h2 class="text-lg font-bold">Step 4</h2>
<p class="mb-5">
Attach the <code>Roboto</code> font in <code>_app.js</code>.
<p>
Attach the <code>Roboto</code> font in:
</p>
<ul class="ml-8 mb-5 list-disc">
<li> <code>./src/app/layout.tsx</code> - if chosen <code>App Router</code> </li>
<li> <code>./src/pages/_app.tsx</code> - without routing </li>
</ul>

<div class="pb-4">
<!--prettier-ignore-->
{{< twsnippet/wrapper "_app.js" "" "mobile" >}}
{{< twsnippet/code active=true lang="jsx" >}}
import "@/styles/globals.css";
import { Roboto } from "next/font/google";

const roboto = Roboto({ weight: "400", subsets: ["latin"] });

export default function App({ Component, pageProps }) {
return (
<>
<style jsx global>{`
html {
font-family: ${roboto.style.fontFamily};
}
`}</style>
<Component {...pageProps} />
</>
);
}
{{< /twsnippet/code >}}
{{< twsnippet/wrapper "./src/app/layout.tsx,./src/pages/_app.tsx" "" "mobile" >}}
<!--prettier-ignore-->
{{< twsnippet/code active=true lang="jsx" >}}
import "./globals.css";
import { Roboto } from "next/font/google";

const roboto = Roboto({ weight: "400", subsets: ["latin"] });

export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={roboto.className}>{children}</body>
</html>
);
}
{{< /twsnippet/code >}}
<!--prettier-ignore-->
{{< twsnippet/code lang="jsx" >}}
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { Roboto } from "next/font/google";
import "tw-elements/dist/css/tw-elements.min.css";

const roboto = Roboto({ weight: "400", subsets: ["latin"] });

export default function App({ Component, pageProps }: AppProps) {
return (
<>
<style jsx global>{`
html {
font-family: ${roboto.style.fontFamily};
}
`}</style>
<Component {...pageProps} />
</>
);
}
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>

Expand All @@ -202,12 +285,12 @@ <h2 class="text-lg font-bold">Step 5</h2>

<h2 class="text-lg font-bold">Step 6</h2>
<p class="mb-5">
Import globally in <code>_app.js</code> Tailwind Elements CSS file (you could do it also in specific component which are using TE).
Import globally in <code>./src/app/layout.tsx </code> or <code>./src/pages/_app.tsx</code> Tailwind Elements CSS file (you could do it also in specific component which are using TE).
</p>

<div class="pb-4">
<!--prettier-ignore-->
{{< twsnippet/wrapper "_app.js" "" "mobile" >}}
{{< twsnippet/wrapper "tsx" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
import "tw-elements/dist/css/tw-elements.min.css";
{{< /twsnippet/code >}}
Expand All @@ -216,19 +299,23 @@ <h2 class="text-lg font-bold">Step 6</h2>

<h2 class="text-lg font-bold">Step 7</h2>
<p class="mb-5">
Create standalone file with name of your component (for example <code>MyDatepicker.js</code> in <code>src/pages</code> directory) and import TE components which are you intend to use. Also include necessary function <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
Create standalone file with name of your component (for example <code>MyComponent.js</code> in <code>src/pages</code> directory - create one if it doesn't exist) and dynamic import TE components which are you intend to use. Also include necessary function <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method. Since <code>tw-elements</code> needs to be used <code>client side</code> don't forget to add <code>"client side"</code> at the beginning of the file.
</p>

<div class="pb-4">
<!--prettier-ignore-->
{{< twsnippet/wrapper "MyDatepicker.js" "" "mobile" >}}
{{< twsnippet/wrapper "./src/pages/MyComponent.tsx" "" "mobile" >}}
{{< twsnippet/code active=true lang="jsx" >}}
import { Datepicker, Input, initTE } from "tw-elements";
"use client";
import { useEffect } from "react";

const MyDatepicker = () => {
const MyComponent = () => {
useEffect(() => {
initTE({ Datepicker, Input });
const init = async () => {
const { Datepicker, Input, initTE } = await import("tw-elements");
initTE({ Datepicker, Input });
};
init();
}, []);

return (
Expand All @@ -252,36 +339,57 @@ <h2 class="text-lg font-bold">Step 7</h2>
);
};

export default MyDatepicker;
export default MyComponent;
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>

<h2 class="text-lg font-bold">Step 8</h2>
<p class="mb-5">
Import (for example in <code>index.js</code>) newly created component wrapping it into <code>dynamic</code> import with <code>ssr</code> object set to <code>false</code>.
<p>
Import the newly created component wrapping it into <code>dynamic</code> import with <code>ssr</code> object set to <code>false</code>. You can do it either in:
</p>
<ul class="ml-8 mb-5 list-disc">
<li><code>./src/app/page.tsx</code></li>
<li>or <code>./src/pages/index.tsx</code></li>
</ul>

<div class="pb-4">
<!--prettier-ignore-->
{{< twsnippet/wrapper "index.js" "" "mobile" >}}
{{< twsnippet/wrapper "tsx" "" "mobile" >}}
{{< twsnippet/code active=true lang="jsx" >}}
import dynamic from "next/dynamic";

const DynamicDatepicker = dynamic(() => import("./MyDatepicker"), { ssr: false });
const DynamicComponent = dynamic(() => import("../pages/MyComponent"), {
ssr: false,
});

const Home = () => {
return (
<>
<DynamicDatepicker />
<DynamicComponent />
</>
);
};

export default Home;
export default Home;
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>

<h2 class="text-lg font-bold">Step 9</h2>
<p class="mb-5">
Start the app and see if everything's fine
</p>

<div class="pb-4">
<!--prettier-ignore-->
{{< twsnippet/wrapper "Terminal" "" "mobile" >}}
{{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
npm run dev
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>

</section>
<!--/Creating and configuring Tailwind & Tailwind Elements-->

Expand Down Expand Up @@ -309,21 +417,25 @@ <h2 class="text-lg font-bold">Step 1</h2>

<div class="pb-4">
<!--prettier-ignore-->
{{< twsnippet/wrapper "MyDatepicker.js" "" "mobile" >}}
{{< twsnippet/wrapper "MyComponent.js" "" "mobile" >}}
{{< twsnippet/code active=true lang="jsx" >}}
import { Datepicker, Input } from "tw-elements";
import { useEffect } from "react";

const MyDatepicker = () => {
const MyComponent = () => {
useEffect(() => {
const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
const myDatepicker = new Datepicker(
document.getElementById("myDatepicker"),
options
);
const init = async () => {
const { Datepicker, Input, initTE } = await import("tw-elements");

const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
const myDatepicker = new Datepicker(
document.getElementById("myDatepicker"),
options
);
}
init();
}, []);

return (
Expand All @@ -346,7 +458,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
);
};

export default MyDatepicker;
export default MyComponent;
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
Expand Down
12 changes: 7 additions & 5 deletions site/content/docs/standard/integrations/nuxt/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,12 @@ <h2 class="text-lg font-bold">Step 2</h2>
<h2 class="text-lg font-bold">Step 3</h2>
<p class="mb-5">
Add the paths to all of your template files in your
<code>tailwind.config.cjs</code> file.
<code>tailwind.config.js</code> file.
</p>

<div class="pb-4">
<!--prettier-ignore-->
{{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
{{< twsnippet/wrapper "tailwind.config.js" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
/** @type {import('tailwindcss').Config} */
module.exports = {
Expand Down Expand Up @@ -229,9 +229,11 @@ <h2 class="text-lg font-bold">Step 6</h2>
<!--prettier-ignore-->
{{< twsnippet/wrapper "app.vue" "" "mobile" >}}
{{< twsnippet/code active=true lang="JavaScript" >}}
import "tw-elements/dist/css/tw-elements.min.css";
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
<script setup>
import "tw-elements/dist/css/tw-elements.min.css";
</script>
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>

<h2 class="text-lg font-bold">Step 7</h2>
Expand Down
6 changes: 3 additions & 3 deletions site/content/docs/standard/integrations/react/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -479,12 +479,12 @@ <h2 class="mt-5 text-lg font-bold">Step 1</h2>
<h2 class="text-lg font-bold">Step 2</h2>
<p class="mb-5">
Add the paths to all of your template files in your
<code>tailwind.config.cjs</code> file.
<code>tailwind.config.js</code> file.
</p>

<div class="pb-4">
<!--prettier-ignore-->
{{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile">}}
{{< twsnippet/wrapper "tailwind.config.js" "" "mobile">}}
{{< twsnippet/code active=true lang="JavaScript" >}}
/** @type {import('tailwindcss').Config} */
module.exports = {
Expand Down Expand Up @@ -576,7 +576,7 @@ <h2 class="text-lg font-bold">Step 6</h2>
className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
placeholder="Select a date" />
<label
for="floatingInput"
htmlFor="floatingInput"
className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
>Select a date</label
>
Expand Down

0 comments on commit fb8f5b7

Please sign in to comment.