Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update integration tutorials #1817

Merged
merged 1 commit into from
Jul 21, 2023
Merged

Update integration tutorials #1817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
220 changes: 166 additions & 54 deletions site/content/docs/standard/integrations/next/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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