This content originally appeared on DEV Community and was authored by Ondřej Tuček
Hello world! Today I would like to share my knowledge I learned when working with Fresh.
What is fresh?
Fresh is "The next-gen web framework" which can be roughly translated to "I am cool deno-based SSR framework". Fresh, instead of using react uses preact, which is tiny(3kb) alternative to regular-sized react. Preact, just like react uses .jsx / .tsx files and syntax and is compatible with react-based libraries.
Cool! But what is twind and why should we care? Well twind is tiny implementation of tailwind css in javascript. Awesome, so what is the problem? Why not stick with it? The answer to this is simple, currently they don't have extension for vs-codium and their extension for regular vs-code is not working. There are hacky fixes, but why should I care if I can use regular old tailwind?
Creating a project
Just like with node.js projects, you need to have the js interpreter installed. To do this on unix-based systems, use this command:
curl -fsSL https://deno.land/x/install/install.sh | sh
Next I would recommend storing the deno executable either by updating your $PATH variable or as I did alias.
So to actually generate fresh project, use this command:
deno run -A -r https://fresh.deno.dev my-project
cd-in and type deno task start which will launch the development version of your application.
Removing Twind
After successfully generating and running your new fresh application, go to import_map.json and delete following lines:
{
"imports": {
"$fresh/": "https://deno.land/x/fresh@1.1.5/",
"preact": "https://esm.sh/preact@10.13.1",
"preact/": "https://esm.sh/preact@10.13.1/",
"preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.6",
"@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
DELETE THESE TWO LINES
"twind": "https://esm.sh/twind@0.16.19",
"twind/": "https://esm.sh/twind@0.16.19/"
}
}
Next we need to get rid of references in main.ts
/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />
import { start } from "$fresh/server.ts";
import manifest from "./fresh.gen.ts";
// Delete two lines bellow
import twindPlugin from "$fresh/plugins/twind.ts";
import twindConfig from "./twind.config.ts";
// Also update the start execution to following
await start(manifest, {});
});
Nice! Right now we should have a application with no styling at all.
Installing Tailwind CSS
Next we need to get ourself a copy of tailwind-cli. You can find one in release tab here. Find latest version with your platform and download it into your fresh project directory. If you fancy, rename it to just tailwind.
Next in the deno.json we need to update our start script to following:
{
"tasks": {
"start": "tailwindcss -i ./static/styles/input.css -o ./static/styles/tailwind.css --minify --watch & deno run -A --watch=static/,routes/ dev.ts"
},
...
}
Next we need to create a directory called styles in static directory. In the styles we need to create file called input.css with the following values:
/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Nice! Next we need to create tailwind.config.cjs file with following code:
/** @type {import('https://esm.sh/tailwindcss@3.1.8').Config} */
module.exports = {
content: [
"./routes/**/*.{tsx,ts}",
"./islands/**/*.{tsx,ts}",
"./components/**/*.{tsx,ts}",
],
theme: {},
plugins: [],
};
and as last step we need to create a wrapper around our application. To do this create a file called _app.tsx in routes directory. The app file should defaulty export a component which returns a JSX structure similiar to regular HTML5 file. Here is my example:
import { Head } from "$fresh/runtime.ts";
import { AppProps } from "$fresh/src/server/types.ts";
export default function App(props: AppProps) {
const { Component } = props;
return (
<html>
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>Goodbye twind!</title>
<link rel="icon" type="image/png" href="../images/favicon.ico"/>
{/* HERE IS OUR TAILWINDCSS stylesheet */}
<link rel="stylesheet" href="../styles/tailwind.css" />
</Head>
<body>
<Component />
</body>
</html>
);
}
Awesome! With this last step done you should be able to use regular old tailwind css with all it's goodies.
Note: Please excuse my poor english as it's my second language.
This content originally appeared on DEV Community and was authored by Ondřej Tuček
Ondřej Tuček | Sciencx (2023-05-15T11:19:15+00:00) Replacing Twind with Tailwind in Fresh. Retrieved from https://www.scien.cx/2023/05/15/replacing-twind-with-tailwind-in-fresh/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.