Prerequisites
Before starting the project make sure to install the following utilities:
Creating a new Express application
Let's create a fresh Express application so that we can go through all the steps together.
Step 1
Create new project
mkdir my-project
cd my-project
npm init
Step 2
Install Express
npm install express
Step 3
Create folder views (in root directory) and put inside
index.ejs file with classical HTML structure.
Step 4
In root directory create index.js file where will be located your
Express configuration.
const express = require("express");
const app = express();
const port = 3000;
const path = require("path");
app.set("view engine", "ejs");
app.use(express.static("public"));
app.use(express.static("node_modules"));
app.get("/", (req, res) => {
res.render("index");
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
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: [
"./public/**/*.{html,js,css}",
"./src/**/*.{html,js,css}",
"./node_modules/tw-elements/dist/js/**/*.js",
],
darkMode: "class",
plugins: [require("tw-elements/dist/plugin.cjs")]
}
Step 3
Add the @tailwind directives for each of Tailwind’s layers to
your input.css file in root directory.
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 4
Start the Tailwind CLI build process. Run the CLI tool to scan your template files for classes and build your CSS.
npx tailwindcss -i ./src/input.css -o ./public/output.css --watch
Step 5
Install ejs.
npm install ejs
Step 6
In index.ejs file, at the end of head link
Tailwind's CSS file.
<link href="/output.css" rel="stylesheet" />
Step 7
Attach the Roboto font in index.ejs.
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
rel="stylesheet" />
Step 8
In index.ejs file, at the end of body link script
for Tailwind Elements JS file.
<script
src="/tw-elements/dist/js/tw-elements.umd.min.js"
type="text/javascript"></script>
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
Initialize components in script section.
const myInput = new te.Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
const myDatepicker = new te.Datepicker(
document.getElementById("myDatepicker"),
options
);