FrontEnd web
Published in

FrontEnd web

How to use tailwindcss with deno and fresh framework?
How to use tailwindcss with deno and fresh?

Standalone CLI

How to use tailwindcss with deno and fresh framework?

Deno is the next future for development; you can build anything with deno; deno has started to increase a big development community and provide extensive infrastructure for developers worldwide.

Deno, a recently released new framework called fresh framework. It is new compared to other javascript cms like angular, nextjs, vite, etc.

The fresh cms have many good features like the plugin, dynamic routing, data fetching, typescript support, etc.

Fresh cms come preinstallation of windicss. windicss is a CSS framework like tailwindcss. windicss is an alternative to tailwindcss. windicss built on top of typescript.

The current version of fresh (1.1.2) uses windicss, not tailwindcss. The windi CSS and tailwindcss have lots of differences. But the good news is that windiCSS provides 99% similar classes like tailwind CSS.

What is the problem with windicss

Windicss is an open-source library maintained by the community. It has fewer features as compared to tailwindcss. For example, if you use a typography plugin in windicss. It is the most common plugin in tailwindcss and windicss. Still, the windicss typography plugin provides fewer CSS classes, but tailwindcss offers many classes and configurations for the typography plugin. I mention only one problem, but you will find more problems when your application grows. With windicss, your fresh framework development is starting slow.

In short, the main problem with windicss is provided fewer configuration and CSS classes than tailwindcss.

I create two applications with the fresh framework—the first application with windicss and the second without windicss.

stats based on time command
stats based on time command

It is small data with the default app. which create by deno run -A -r https://fresh.deno.dev my-project command.

The first time I have faced an issue with lume. Lume is a static site generator based on deno. After I recreate my demo blog website again with a fresh framework. In my demo blog, I have eight pages and 50+ components. I feel a development issue.

Solution

Tailwindcss provides a standalone CLI tool for using tailwindcss outside the nodejs world. With standalone-CLI, you enable tailwindcss in deno, rust, python, etc. you do not need to install any nodejs packages.

Note

If you create a new fresh framework app, then make sure you create an app without installation of windicss.

For older projects, remove windicss configuration and install standalone CLI in deno. After install tailwind CLI, you can use tailwind css plugin without installation any thing. you can also use other plugin as well.

How to install a standalone CLI in deno or fresh cms?

The installation standalone CLI process is more straightforward than installing tailwindcss with nodejs. You copy and paste two commands to enable tailwindcss in deno fresh cms.

Steps

  1. Select Operating system
  2. Copy and paste the Installation Command

Select Operating system

The step is easy, select the operating system which you use, for example, Windows, Linux ( arm64, armv7, X64 ) and macOS ( arm64 and x64).

install standalone tailwindcss CLI in deno fresh cms

Linux architecture

For Linux users, the standalone CLI needs to be clarified. So clear it. Linux has three significant types of architecture.

To check which type of Linux architecture you have on your laptop.

dpkg --print-architecture

or

uname -m
Linux architecture

You can learn more about architecture in Linux, which I already explained in detail on freecodecamp.

AMD64 and x86 is same architecture.

macOS architecture

MacOS comes with two architectures, arm64 and x64. The most common is X64 architecture. You can check your macOS architecture with the following command. If it does not work, then search on google.

uname -a

or

arch

Copy and paste the Installation Command

In the first step, you determine your architecture according to your Operating system. The next step is to install tailwind CSS standalone CLI on your laptop.

There are two ways to install tailwind standalone CLI.

  1. Project base
  2. Globally Installation

Project base

Go to your existing or new project folder and install or download the tailwindcss cli binary file with the help of the curl command. If the curl command is not installed, first install it. Otherwise, download the tailwind cli binary file directly from the tailwindcss release page on GitHub.

// install tailwind CLI linux x64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.4/tailwindcss-linux-x64

// add executable permission
chmod +x tailwindcss-linux-x64
// rename tailwindcss-macos-arm64 file to tailwindcss
mv tailwindcss-linux-x64 tailwind

The downside of project base tailwind cli is that you download tailwindcss again and again in every project, which is time-consuming. When you update tailwind cli, you update manually into every project. The solution is to install tailwind CLI globally in your system.

Globally Installation

The Install process is similar to the project base. in the global installation, you create a folder in the home directory with the help of a dot. for example .tailwind folder and install it.

# change folder 
cd /.tailwind

# install tailwind CLI linux x64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.4/tailwindcss-linux-x64

# add executable permission
chmod +x tailwindcss-linux-x64
Install tailwindcss standalone cli glbally
Install tailwindcss cli globally

After installation is finished, change the permission and do not rename it. Then add your .taiwind folder to .bashrc file in Linux and macOS. In the window, you add .tailwind a folder in the path variable.

# .bashrc 

# add the tailwindcss cli

# if not work tailwindcss path variable the use bash alias.

# alias tailwind='/home/rajdeepsingh/.tailwind/tailwindcss-linux-x64'

export PATH="/home/rajdeepsingh/.tailwind/:$PATH"

Now you can use tailwindcss on your machine anywhere, and you do not need to reinstall the tailwindcss binary again and again.

Install Tailwindcss globally

How to use Tailwind CSS in the fresh framework?

After installation, the tailwind standalone CLI in your laptop is based locally and globally. Now you can use tailwind CSS without any nodejs package.

If you install a standalone CLI globally, run the tailwind CSS init command in your project.

tailwind init

You run the tailwind CSS init command for the project base installation in the following ways.

./tailwind init

Now `tailwind init` command creates a tailwind.config.js file in your project root level.

Fresh framework folder struture
Fresh framework folder structure

by default tailwind.config.js file looks like

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [""],
theme: {
extend: {},
},
plugins: [],
}

Now we add the content folder in tailwind.config.js and copy and paste the following code into tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {

content: ["islands/**.{js,jsx,tsx}","routes/**.{js,jsx,tsx}","components/**.{js,jsx,tsx}"],


theme: {
extend: {},
},
plugins: [],
}

The last step is to add the deno task for tailwind CSS. Please copy the following code and paste it into deno.json file.

For the global installation, you can use the following code and paste it into your deno.json file.

// deno.json
{
"tasks": {
"start": "deno run -A --watch=static/,routes/ dev.ts",

"tailwind":" tailwind -i main.css -o static/build.css -w",
"tailwind:build":" tailwind -i main.css -o static/build.css -m"
},
"importMap": "./import_map.json",
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact"
}
}

If you are a project base configuration, you can copy the following configuration and replace it.

// deno.json
{
"tasks": {
"start": "deno run -A --watch=static/,routes/ dev.ts",

"tailwind":" ./tailwind -i main.css -o static/build.css -w",
"tailwind:build":" ./tailwind -i main.css -o static/build.css -m"
},
"importMap": "./import_map.json",
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact"
}
}

Now we run two separate tasks ( script ) for the fresh framework.

  1. The deno task start is run fresh framework local server.
  2. The deno task tailwind is create a tailwindcss build file in static/build.css folder.

How to use the tailwind CSS build file in the fresh framework?

You can add a tailwind CSS compress or minify a file with asset() a function. I create a layout component in fresh and also layout component help create a layout for our website.

// components/Layout.tsx

import { Head } from "$fresh/runtime.ts";
import { asset } from "$fresh/runtime.ts";
import Header from './Header.tsx';

export default function SharedHead(props) {

return (
<>
<Head>
<link href={ asset("/build.css") } rel="stylesheet" type="text/css" />
</Head>

<Header />

<div className=" mt-10 mx-auto justify-center">
{props.children}
</div>

</>
);
}

In the future version of fresh, you can use _app.js file. But currently, you can use the layout component in fresh(1.1.2).

How to use the official tailwindcss plugin in tailwind CLI?

You can use the official tailwindcss plugin look like.

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["islands/**.{js,jsx,tsx}","routes/**.{js,jsx,tsx}","components/**.{js,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}

You can also use the flow bite component library with the fresh flow bite plugin.

Conclusion

The cool thing about windicss is the dev tool change class. On the other hand, tailwindcss does not support that. Windicss is excellent; I’m not criticising windicss lack of configuration and performance issues. Every software has some advantages or disadvantages.

My opinion for those developers who spend lots of time with Tailwind CSS is like mine. I always miss tailwind CSS and its configuration. For that reason, I start to find a solution, How to use tailwind CSS with deno. Luckily, I see a standalone CLI tool, and now I do not need to install any node js package for tailwind CSS.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh. dev, Nextjs, frontend web, and Sign up for a free newsletter.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/