Movatterモバイル変換

[0]ホーム
URL:

TW Elements React integration

This article shows you how to integrate React application with TW Elements. Free download, open source license.

Dedicated package

We are excited to announce that we released adedicated React package for TW Elements.

DOWNLOAD TW ELEMENTS REACT

We're also looking for talented contributors to help us grow and improve it.

This is a fantastic opportunity to contribute to an open-source project, work with a professional team, and gain invaluable experience in React and Tailwind CSS. The project is still fresh & just taking its shape so it's the perfect stage for contributions.

SEE CONTRIBUTION GUIDELINES join discord server

For available tasks, check ourproject roadmap. Please note that some of the tasks are assigned already, but there's plenty of room for everyone to contribute. You are also welcome to start your own Pull Requests.

Contributors will have access to contributor-only channels on our newDiscord server, but we invite you to join & participate in the community, even if you're not able to contribute code yet :)

We're thrilled to see the creative solutions you come up with, and we're here to provide assistance and guidance along the way. Every contribution, no matter how small, helps us build a better project.

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers.Every share counts, thank you!

Important: The documentation content below is a guideline for integrating Tailwind Elements Standard with React on your own. If you would like to use the dedicated React package, make sure to check out theReact documentation.

Prerequisites

Before starting the project make sure to install the following utilities:

  • Node LTS (18.x.x or higher recommended)
  • Code editor. We recommendVSCode

Creating a new React application

Let's create a fresh React application so that we can go through all the steps together. We are going to do this throughVite - very popular and extremly light module bundler.

Step 1

Create new project.

                npm create vite@latest my-project -- --template react    cd my-project    npm install

Step 2

Run the development server.

                npm run dev

Installing and configuring Tailwind CSS and TW Elements

Step 1

Install Tailwind CSS.

                npm install -D tailwindcss postcss autoprefixer    npx tailwindcss init -p

File structure

If you have followed all instructions mentioned earlier, your file structure should look like this:

        my-project/        ├── node_modules/        ├── public/          ├── src/        │   ├── assets/        │   ├── App.css        │   ├── App.jsx        │   ├── index.css        │   └── main.jsx        ├── ...        ├── index.html        ├── package-lock.json        ├── package.json        ├── postcss.config.js        ├── README.md        ├── tailwind.config.js        └── tsconfig.json

Step 2

Add the paths to all of your template files in yourtailwind.config.js file.

              /** @type {import('tailwindcss').Config} */  module.exports = {    content: [      "./index.html",      "./src/**/*.{js,ts,jsx,tsx}",      "./node_modules/tw-elements/js/**/*.js",    ],    theme: {      extend: {},    },    darkMode: "class",    plugins: [require("tw-elements/plugin.cjs")],  };

Step 3

Add the@tailwind directives for each of Tailwind’s layers to yourindex.css file.

                @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");    @tailwind base;        @layer base {      html {        @apply text-surface;        @apply bg-white;      }      html.dark {        @apply text-neutral-50;        @apply bg-body-dark;      }    }        @tailwind components;    @tailwind utilities;        p {      @apply leading-[1.6];    }

Step 4

Install TW Elements.

                npm install tw-elements

Step 5

Import components which are you intend to use and necessary functioninitTWE. InitializeinitTWE in a lifecycle method.

                import { useEffect } from "react";    import { Tooltip, initTWE } from "tw-elements";        const App = () => {      useEffect(() => {        initTWE({ Tooltip });      }, []);          return (        <div className="mt-16 flex justify-center">          <p className="text-lg">            Hover the link to see the            <a              href="#"              className="text-primary ps-1 transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"              data-twe-toggle="tooltip"              title="Hi! I'm tooltip"            >              tooltip            </a>          </p>        </div>      );    };        export default App;

Step 6

Start the app and see if everything's fine. Awesome! You're all set to dive into using TW Elements for your React project. Have fun!

                npm run dev

Initializing via JS

By default all components have autoinit which means they are initialized by data attributes. But if you want to make init by JavaScript - there is also possibility to do that.

Step 1

Import components which are you intend to use and initialize components in lifecycle hook.

                import { useEffect } from "react";    import { Tooltip } from "tw-elements";        const App = () => {      useEffect(() => {        const myTooltip = new Tooltip(document.getElementById("my-tooltip"));      }, []);          return (        <div className="mt-16 flex justify-center">          <p className="text-lg">            Hover the link to see the            <a              id="my-tooltip"              href="#"              className="text-primary ps-1 transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"              title="Hi! I'm tooltip"            >              tooltip            </a>          </p>        </div>      );    };        export default App;

Troubleshooting

Problem overview:

Users might face difficulties with improper functioning of components in some frameworks for TW Elements. This is due to the fact that some of them aren't initializing properly.

Suggested solution:

Consider importingtw-elements package dynamically. By doing it, you can enhance the initialization process, potentially resolving any issues related to component functionality. Additionally, ensure that theinitTWE() method is called in the correct sequence and with the appropriate parameters, facilitating a smoother experience with TWE components.

                      useEffect(() => {            const init = async () => {              const { Tooltip, initTWE } = await import("tw-elements");              initTWE({ Tooltip });            };            init();          }, []);

Source TW Elements Team

Problem overview:

Users may encounter initialization issues with TWE components when navigating through applications with routing mechanisms. The default behavior of theinitTWE method includes checking if components are already initialized, which can lead to complications when components are unmounted and then remounted during routing.

Suggested solution:

Consider using usingautoReinits option ininitTWE method. By default it's value is set tofalse. By changing the value totrue, theinitTWE method won't check if components were already initialized.

                        initTWE({ Tooltip }, { allowReinits: true });

Source TW Elements Team

Related resources

Tutorials:

Integrations :

Design System (Figma):

[8]ページ先頭
©2009-2025 Movatter.jp