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

Prerequisites

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

Node LTS (18.x.x or higher recommended)
PHP
Composer
Code editor. We recommend VSCode

Creating a new Laravel application

Let's create a fresh Laravel application so that we can go through all the steps together.

Note: If you have trouble with installing composer and you got an error bound installation - try composer install --ignore-platform-req=ext-fileinfo or composer update --ignore-platform-reqs.

Step 1

Create new project.

Terminal

composer create-project laravel/laravel my-project
cd my-project

Step 2

Run the development server.

Terminal

php artisan serve

Installing and configuring Tailwind CSS and TW Elements

Step 1

Install Tailwind CSS.

Terminal

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/
├── resources/
│   ├── css/
│   │   └── app.css
│   ├── js/
│   │   ├── app.js
│   │   └── ...
│   └── views/
│       └── welcome.blade.php
├── ...
├── package-lock.json
├── package.json
├── ...
├── postcss.config.js
├── README.md
├── tailwind.config.js
└── vite.config.js

Step 2

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
     "./resources/**/*.js",
    "./resources/**/*.vue",
    "./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 your app.css file.

./resources/css/app.css

@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

Make sure your compiled CSS and JS are included in the head in welcome.blade.php file.

./resources/views/welcome.blade.php

@vite('resources/css/app.css')
@vite('resources/js/app.js')

Step 5

Install TW Elements.

Terminal

npm install tw-elements

Step 6

Import and initialize with initTWE function components which are you intend to use and necessary function initTWE in app.js. Additionally add HTML markup for components in the welcome.blade.php file.

./resources/js/app.js
./resources/views/welcome.blade.php

import { Tooltip, initTWE } from "tw-elements";
initTWE({ Tooltip });

...
<main>
  <div class="mt-16 flex justify-center">
    <p class="text-lg">
      Hover the link to see the
      <a
        href="#"
        class="text-primary 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>
</main>
...

Step 7

Start build process.

Terminal

npm run dev

And run the development server. Awesome! You're all set to dive into using TW Elements for your Laravel project. Have fun!

Terminal

php artisan serve

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 and initialize components.

./resources/js/app.js
./resources/views/welcome.blade.php

import { Tooltip } from 'tw-elements';

const myTooltip = new Tooltip(document.getElementById('my-tooltip'));

...
<main>
  <div class="mt-16 flex justify-center">
    <p class="text-lg">
      Hover the link to see the
      <a
        id="my-tooltip"
        href="#"
        class="text-primary 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>
</main>
...

Troubleshooting

Problem overview:

After initializing TWE components as described in the documentation you can got erros like (TWE Components name) is not defined or te is not defined.

Source GitHub Discussion #1839 #1737

TW Elements Laravel integration

Prerequisites

Creating a new Laravel application

Step 1

Step 2

Installing and configuring Tailwind CSS and TW Elements

Step 1

File structure

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Initializing via JS

Step 1

Troubleshooting

Problem overview:

Suggested solution:

Source GitHub Discussion #1839 #1737

Access restricted

To view this section you must have an active PRO account

TW Elements Laravel integration

Prerequisites

Creating a new Laravel application

Step 1

Step 2

Installing and configuring Tailwind CSS and TW Elements

Step 1

File structure

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Initializing via JS

Step 1

Troubleshooting

TWE Components initialization

Problem overview:

Suggested solution:

Source GitHub Discussion #1839 #1737

Related resources

Tutorials:

Integrations :