Jan 2
Standalone CLI
How to use tailwindcss with deno and fresh framework?
Use tailwind CSS in deno without installing any nodejs and deno package.
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.
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
- Select Operating system
- 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).
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
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
archCopy 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.
- Project base
- 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
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.
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 initYou run the tailwind CSS init command for the project base installation in the following ways.
./tailwind initNow `tailwind init` command creates a tailwind.config.js file in your project root level.
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.
- The
deno task startis run fresh framework local server. - The
deno task tailwindis create a tailwindcss build file instatic/build.cssfolder.
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.
