TW Elements React is a plugin that extends the functionality of the library with many interactive components.
Some of our components (like collapse or modals) include a custom React code. However, they do not require any additional installation, all the necessary code is always included in the example and copied to any Tailwind project with React - it will work.
NPM
NPM is a recommended way to work with TW Elements React and others libraries.
Make sure that you have Node.js
installed. In order to verify
that, open a command line
and type node -v
. If
node is installed you should see it's version in a console.
Prerequisites
1. Before starting the project make sure to install Node.js (LTS) and TailwindCSS.
2. Create a new React app. If you already have one installed, you can jump to the TW Elements React section. We are going to create the app with create-react-app
command.
npx create-react-app my-app
3. Navigate to app's directory
cd my-app
4. Install and initialize tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
5. Add the necessary Tailwind directives to your ./src/index.css
file
to be able to use Tailwind classes on your website.
@tailwind base;
@layer base {
html {
@apply text-neutral-800;
}
html.dark {
@apply text-neutral-50;
@apply bg-neutral-800;
}
}
@tailwind components;
@tailwind utilities;
TW Elements React
If you installed your app via create-react-app
, then your folder structure should look like this. We are going to refer to this structure, but if yours looks different it's not really an issue.
my-project/
├── node_modules/
├── public/
├── src/
│ ├── App.js
│ ├── index.css
│ ├── ...
│ └── index.js
├── package-lock.json
├── package.json
├── ...
└── tailwind.config.js
1. Run the following command to install the package via NPM:
npm install tw-elements-react
2. TW Elements is a plugin and should be included inside
tailwind.config.js
. It is also recommended to extend the
content
array with a js files pattern that loads dynamic
component classes:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/tw-elements-react/dist/js/**/*.js"
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [require("tw-elements-react/dist/plugin.cjs")]
}
3. Import TE React css file. Add the following line in your index.js
file.
import "tw-elements-react/dist/css/tw-elements-react.min.css";
4. Now you can start working on your app. Dynamic components will work after importing the package inside your components.For example, the collapse component will have proper styles, and toggle the content on button click when we add the code bellow to the App.js file.
import React, { useState } from "react";
import { TECollapse, TERipple } from "tw-elements-react";
export default function App() {
const [show, setShow] = useState(false);
const toggleShow = () => setShow(!show);
return (
<>
<TERipple rippleColor="light">
<a
className="inline-block rounded bg-primary mr-2 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
role="button"
onClick={toggleShow}
>
Link
</a>
</TERipple>
<TERipple rippleColor="light">
<button
type="button"
className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
onClick={toggleShow}
>
Button
</button>
</TERipple>
<TECollapse show={show}>
<div className="block rounded-lg bg-white p-6 shadow-lg dark:bg-neutral-700 dark:text-neutral-50">
Some placeholder content for the collapse component. This panel is
hidden by default but revealed when the user activates the relevant
trigger.
</div>
</TECollapse>
</>
);
}
5. Start the app if you haven't already
npm start
MDB GO / CLI
Create, deploy and host anything with a single command.
1. To start using MDB GO / CLI install it with one command:
npm install -g mdb-cli
2. Log into the CLI using your MDB account:
mdb login
3. Initialize a project and choose TW Elements React from the list:
mdb init tailwind-elements-react
4. Install the dependencies (inside the project directory):
npm install
5. Run the app:
npm start
6. Publish when you're ready:
mdb publish
Vite
Node.js version 16.17.0 + / 18.1.0 +
installed. Please update if your package
manager asks for it. If you are expecting issues with vite.config.js
and you don't want to update the npm, try using the 4.3.9
version of vite.
Vite (French word for "fast", pronounced /vit/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. TW Elements can be imported in Vite applications according to the following procedure:
1. Create a new vite project and enter the newly created directory. You can skip this step if you already have it installed.
npm create vite@latest my-project -- --template react-ts
cd my-project
2. Install tailwind CSS and its dependencies. After that,
init
the tailwind with the Tailwind CLI tool to create
tailwind.config.js
file.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3. Go to the tailwind.config.js
file and add paths where your
html files are going to be stored. You can change the
index.html
location but make sure to change to
root folder
inside the vite.config.js
file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/tw-elements-react/dist/js/**/*.js"
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [require("tw-elements-react/dist/plugin.cjs")]
}
4. Add the necessary Tailwind directives to your ./src/index.css
file
to be able to use Tailwind classes on your website.
@tailwind base;
@layer base {
html {
@apply text-neutral-800;
}
html.dark {
@apply text-neutral-50;
@apply bg-neutral-800;
}
}
@tailwind components;
@tailwind utilities;
5. Install the tw-elements-react
package.
npm install tw-elements-react
6. Import TE React css file. Add the following line in your main.tsx
file.
import "tw-elements-react/dist/css/tw-elements-react.min.css";
7. Now you can start working on your app. The collapse component should have proper styles, and toggle the content on button click.
import React, { useState } from "react";
import { TECollapse, TERipple } from "tw-elements-react";
export default function App(): JSX.Element {
const [show, setShow] = useState(false);
const toggleShow = () => setShow(!show);
return (
<>
<TERipple rippleColor="light">
<a
className="inline-block rounded bg-primary mr-2 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
role="button"
onClick={toggleShow}
>
Link
</a>
</TERipple>
<TERipple rippleColor="light">
<button
type="button"
className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
onClick={toggleShow}
>
Button
</button>
</TERipple>
<TECollapse show={show}>
<div className="block rounded-lg bg-white p-6 shadow-lg dark:bg-neutral-700 dark:text-neutral-50">
Some placeholder content for the collapse component. This panel is
hidden by default but revealed when the user activates the relevant
trigger.
</div>
</TECollapse>
</>
);
}
8. TW Elements React should be connected properly to the vite app. You can start the app by running the following command.
npm run dev