Prerequisites
Before starting the project make sure to install the following utilities:
Creating a new Laravel application
Let's create a fresh Laravel application so that we can go through all the steps together.
Step 1
Create new project
composer create-project laravel/laravel my-project
cd my-project
Installing and configuring Tailwind CSS and Tailwind Elements
Step 1
Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 2
Add the paths to all of your template files in your
tailwind.config.cjs file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
"./node_modules/tw-elements/dist/js/**/*.js"
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [require("tw-elements/dist/plugin.cjs")]
}
Step 3
Add the @tailwind directives for each of Tailwind’s layers to
your ./resources/css/app.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 4
Make sure your compiled CSS and JS are included in the
head in welcome.blade.php file (located in
./resources/views directory).
@vite('resources/css/app.css')
@vite('resources/js/app.js')
Step 5
Attach the Roboto font in welcome.blade.php.
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
rel="stylesheet" />
Step 6
Install Tailwind Elements.
npm install tw-elements
Step 7
Import components which are you intend to use and necessary function
initTE in app.js file which is located in
./resources/js directory.
Initialize initTE.
import { Datepicker, Input, initTE } from "tw-elements";
initTE({ Datepicker, Input });
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.
import { Datepicker, Input } from "tw-elements";
const myInput = new Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
const myDatepicker = new Datepicker(
document.getElementById("myDatepicker"),
options
);