In this article, you will learn how to integrate the Tel Wind CSS with the electron to build stylish, responsible desktop applications.
You will set up a tail wind in an electron project, create your project, style components, and improve development workflow. This is best for developers who seek to connect the first CSS framework of tail wind with electron cross platform capabilities.
The material of content
A quick overview of the electron
Electron There is a framework that allows developers to create desktop applications for Windows, Macos, and Linux such as HTML, CSS, and JavaScript, as well as familiar web technologies, with node -JS for backward features.
It’s open source, MIT licensed, and completely free to use-whether you are making personal plans or commercial apps.
In this guide, we will see why many developers and companies choose electrons for the construction of modern desktop apps.
What is Tel Wind CSS?
Tel Wind CSS The first framework for a usefulness is to style the web interface. Unlike the framework, which provides fully developed, pre -produced UI components, Tail Wind offers a comprehensive set of the useful use of the only purposes. You apply these classes directly to your HTML elements, which means that you can quickly develop custom layouts and design without diving in separate CSS files.
Great advantage? Precision and flexibility – you can combine these classes and collect unique, responsible interfaces, but you see fit, while you are able to keep markup lean and maintain.
Electron and Tel Wind why work together
Electron uses HTML, CSS, and JavaScript to create desktop applications. Basically, it runs a web app in the desktop shell. This makes it easier to connect modern front and tools such as tail wind CSS.
The first approach to the utility of Tel Wind allows you to style your interface directly in HTML, which can accelerate the development of the UI. Instead of writing custom styles or managing large CSS files, you apply the default classes directly to the elements. It alleys well with the electron structure, where layouts and styles are firmly connected to the same HTML environment.
The tail wind box also provides sensible defaults and permanent design systems. This helps you to speed up prototypes and visually permanent desktop apps. Although some familiarity with the CSS is still helpful, Tel Wind’s approach can reduce the overhead of style establishment and management, especially in small or design light projects.
Together, electrons and Tail Wind offer a straight path for the construction of desktop apps.
What will we make?
In this tutorial, we will create a basic electron desktop app that has styled with Tel Wind CSS and will be better with Flyonoi components. You do not need any previous experience with electron or tail wind.
By the end of the guide, you will have:
A working desktop window (electron)
Styled Ui with Tel Wind CSS
Reusable prostation button component
A completely active moodle dialog that runs through Flyonoi
It will provide a solid base to create more complex apps in the future.
Provisions
Before we drown, make sure you have the following:
The basic knowledge of HTML, CSS, and Javascript. You do not need to be an expert, but understanding how to form a HTML and use the basic JavaScript will help you to follow it.
Familiar with nod dot j and npm. We will use the NPM (node package manager) to install dependence and run blood commands.
Nod dot j is installed on your machine. You can download it nodejs.org.
A code editor. I have a recommendation Visual studio code.
Access to Terminal / Command Line. You will need to run a command in the terminal to set up things.
How to start the electron project
Let’s set up a basic electron app from the beginning. It will launch a simple desktop window that loads the HTML file, working as your UI basis.
1. Make your project folder
First, open your terminal and create a new project folder:
mkdir my-electron-app
cd my-electron-app
It creates a new folder called my-electron-app And changes the directory in it. This folder will be your projectwork space.
2. Install electrons
Next, install electrons as a development dependent:
npm install electron --save-dev
This will add electron to your project node_modules And make up your update package.json File
This command installs electron as a developmental dependence. Electron allows you to create desktop apps in various platforms using web technologies such as HTML, CSS, and Javascript.
3. Combination package.json
Do your update package.json To indicate by the designated file main.jsAnd easily add a script to start the app.
Make your edit package.json As such:
"main": "main.js",
"scripts": {
"start": "electron ."
}
4. Create main.js
Create a file that has a name main.js In your Route Folder and add the following code:
const { app, BrowserWindow } = require("electron/main");
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile("index.html");
};
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
This is your Main. It creates and managing the app window when loading your HTML file.
5. Create index.html (The presentation process)
html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
<title>Hello from Electron renderer!title>
head>
<body>
<h1>Hello from Electron renderer!h1>
<p>p>
<p id="info">p>
<script src="./renderer.js">script>
body>
html>
It is Front End (presenting) Your electron app you can use standard HTML, CSS, and JavaScript like a browser here.
Option: If you want to add Javascript interactive, a renderer. Create a JS file.
6. Run the electron app
Now, make a file that says main.js At the root of your project. This is the main process that starts your electron app:
npm start
This command runs the app using the script that you have configured package.json. A desktop window should open, showing your HTML content.
How to connect Tel Wind CSS with electron?
For this guide, we will use Tel Wind CLI The point of view.
Tail Wind CLI is a command line tool that facilitates you to produce and set up tail wind utility classes directly into the CSS file. You do not need complex blood tools like web packs or post CSS. This makes it excellent from electron apps such as simple projects, where you want the least setup and quick styling. CLI is also a --watch The mode that automatically rebuilds the CSS when the files are changed. This feature helps you stay fruitful.
1. Install Tel Wind CSS
First, install Tail Wind CSS. Make sure the node dot JS is also installed, then run:
npm install tailwindcss @tailwindcss/cli
This command installs tail wind and its CLI tool as a developmental dependence in your project. We will use CLI to build and monitor our tail wind style.
2. Set tail wind css
A input.css File with the following content below to configure Tel Wind:
@import "tailwindcss";
This line instructs Tail Wind to prepare all its utility classes in an output file, which we will compile next.
3. Add a Blood Script
Then refresh you package.json To add blood script:
"scripts": {
"watch:css":"npx @tailwindcss/cli -i ./input.css -o ./output.css --watch",
}
This command looks at you input.css File and permanently produces a compiled CSS file (output.css) Whenever it detects changes. You will add this file to your HTML.
4. Link output.css I index.html
Open your own index.html File and add it to
<link href="./output.css" rel="stylesheet">
Then compose Tel Wind CSS with this command:
npm run watch:css
This stage includes your electron app UI compiled tail wind styles.
5. Set tail wind css
Start watching changes and run this script to create your CSS:
npm run watch:css
Keep running this process in the terminal window. It refreshes output.css Live as soon as you work.
6. Update UI with Tel Wind classes
Change your content with this example layout:
<body class="flex items-center justify-center h-screen bg-gray-100">
<button type="button"
class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-purple-600 text-white hover:bg-purple-700 focus:outline-hidden cursor-pointer focus:bg-purple-700 disabled:opacity-50 disabled:pointer-events-none">
Hello Tailwindcss
button>
body>
7. Run the electron app
Run electron server with this command:
npm start
Thanks to the Tel Wind CSS, your electron window should now open the center with a well styling button.
How to use the Tel Wind component’s library – a practical example
We’re going to use FlyonoiAn open source tail wind component library. It also includes a mixture of JavaScript plugins as well as a mixture of utility classes. Flyonoi draws thoughts from Daisyui but also from Perlin, and combines flexibility and simplicity. It also helps you make the interface that responds well and looks permanently.
1. Install Flyonoi
You can install Flyonoi with a command below. Make sure the node dot is installed, then run:
npm install -D flyonui@latest
Flyonoi installs as a developmental dependence in its project, which makes it available for integration of its CSS and JS.
2. Add Flyonoi as plugged input.css:
@import "tailwindcss";
@plugin "flyonui";
@import "./node_modules/flyonui/variants.css";
@source "./node_modules/flyonui/dist/index.js";
@plugin "flyonui"Injection to the spiritual classes of Flyonoi in your construction.@importThe customs created for JS components contain variations.@sourceLine is required for classes used in JS.
3. Add Flyonoi JavaScript for Interactivity
Ok before closing tag in your HTML, include:
<script src="../node_modules/flyonui/flyonui.js">script>
This script enables interactive behavior for flightonial components, such as overlages, models and dropdowns.
4. Use a Flyonoi component
For example, update your UI with it:
<body class="flex items-center justify-center h-screen bg-gray-100">
<button type="button" class="btn btn-primary">
Hello FlyonUI
button>
body>
-
.btnAnd.btn-primaryClasses come from Flyonoi – providing you with styling, spiritual components without producing customs CSS.
Why does it make a difference
Cleaner code: Flyonoi’s spiritual classes enable your templates to read and maintain more reading and maintaining the Verbows utility classes.
Interactive without overhead: Easily include dynamic features such as Flyonoi’s JS Plugin Easily Add models or accorders – they do not need to code from the beginning.
Easy styling: Flyonoi builds on the tail wind utility approach, so you can quickly customize the ingredients with familiar classes.
Let’s check the Flonoi JS ingredients
To show how Flyonoi works, we will test one of its JavaScript -powered UI ingredients Moodle. Models are ordinary UI elements that receive USER users’ attention to warnings, verification or additional information without removing the current page.
Why Moodle Test?
Moodle test helps you:
Check that the components of the Javascript of the Flyonoi work and work properly within their electrons and tail wind setup.
See how easy it is to add interactive features using Flyonoi’s built -in classes and data attributes.
Understand how Moodle responds to different screen size and how the UI reacts to the user’s actions, such as opening and closing dialogues.
How to test Moodle
Copy the following example code in your own index.html File This button will open the Moodle dialog with some place holder content:
We will use it Moodle example For testing. Copy the following code in your own index.html:
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="basic-modal" data-overlay="#basic-modal">Open modalbutton>
<div id="basic-modal" class="overlay modal overlay-open:opacity-100 hidden overlay-open:duration-300" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Dialog Titleh3>
<button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#basic-modal">
<span class="icon-(tabler--x) size-4">span>
button>
div>
<div class="modal-body">
This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the
modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and
demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling
will move the modal as needed.
div>
<div class="modal-footer">
<button type="button" class="btn btn-soft btn-secondary" data-overlay="#basic-modal">Closebutton>
<button type="button" class="btn btn-primary">Save changesbutton>
div>
div>
div>
div>
After updating the file, re -start your electron app:
npm start
The result is:
Conclusion
You can use Tail Wind CSS and electrons to build desktop applications that look good and operate well on various devices. This enhances many electron functions and good styling system of tail wind, which allows you to stay fruitful and use clean design methods.
Full code and more details here are in storage: TS-Electron-Tale Winds.
I have written with the help of this tutorial ProtewayAn experienced tail wind CSS manufacturer.