This project was created using Bun v1.3.5. But you can use Node/Npm combination as an alternative. Detailed step-by-step contains both.

What is Bun? Bun is a fast all-in-one JavaScript runtime.

tldr;

In this guide, I make getting started with FlyonUI as painless as possible.

Right up front, you’ll find a quick-download link for the pre-built static FlyonUI stylesheet and JavaScript files — so you can grab them, drop them into your project, and start building a beautiful dashboard in minutes.

Want the freshest version possible? I’ll show you how to simply clone my Git repository [ vguhesan/tailwindcss-flyonui-artifacts-extractor ] and run just a few commands to generate your own up-to-date CSS and JS artifacts using the latest source code.

Then we dive into the magic: I explain exactly how to extract and bundle standalone CSS and JavaScript from Tailwind CSS and FlyonUI frameworks. This process was created specifically for backend developers working with Go, Python, or similar languages who want modern, interactive dashboards without spinning up a full Node.js frontend environment.

Using the lightning-fast Bun runtime and PostCSS, I walk you through generating a custom, optimized bundle that you can serve directly as static files from your backend server.

Follow along with my clear step-by-step workflow: start from a basic HTML file and end up with a fully styled, feature-rich interface packed with interactive components.

The payoff? You get to bring semantic UI classes and powerful headless plugins into your traditional server-side web apps—keeping everything simple, fast, and free of heavy frontend tooling.

Ready to jump in? Download the ready-to-go static FlyonUI files and start building your dashboard today!

To learn more about the dashboard templating system visit the following resources:

• Downloadable Artifacts from Repo
• GitHub vguhesan/tailwindcss-flyonui-artifacts-extractor source repository
• Learn more about FlyonUI Dashboards
• Learn more about TailwindCSS Design System

Why?

If you are a developer building applications with Python (Flask/Django) or Golang (http/Fiber/Gin), you might find yourself in a common dilemma: you want the professional, modern aesthetic of TailwindCSS and FlyonUI, but you don’t want the complexity of a dedicated Node.js frontend server.

Many of us prefer to serve our content directly from our backend frameworks as either static or dynamic websites for performance reasons (or moving away from the SPA paradigm or prefer using HTMX). However, modern UI frameworks are often tightly coupled with the Node ecosystem. I created this process because there is a clear need for a bridge: a way to extract the generated styles and dependent scripts so they can be served as simple static assets by a backend that isn’t running JavaScript.

By using this extraction method, you get the best of both worlds:

• The Power of TailwindCSS: You retain the utility-first design system that makes building beautiful websites easier.
• The Richness of FlyonUI: You can leverage daisyUI’s semantic classes and Preline’s interactive headless JavaScript plugins for accessible, responsive UI components without a full React or Vue setup.
• Architectural Simplicity: You avoid the overhead of a frontend-only server while still delivering high-quality, interactive dashboards powered by professional-grade CSS and JS artifacts.

Ultimately, this allows you to focus on your Go or Python backend logic while ensuring your frontend remains modern, responsive, and visually stunning.

The diagram below shows you the typical deployment pattern that we will be working towards:

Option-1: Grab-n-go Option

Use this option if all you want is a pre-built static FlyonUI stylesheet and JavaScript files — so you can grab them, drop them into your project, and start building a beautiful dashboard in minutes.

You can download the bundle here: Downloadable Artifacts from Repo

Please note that as of writing this article, here are the latest version of the stack:

• TailwindCSS (v4.1.18)
• FlyonUI (v2.4.1)
• Iconify (v1.2.0)

If you need a more recent version of the resources, then try Option-2 or Option-3 below.

Option-2: Generate fresh copies

Want the freshest version possible? Then follow this option.

cd {your-temp-folder}
# Clone the repository locally
git clone https://github.com/vguhesan/tailwindcss-flyonui-artifacts-extractor.git
cd tailwindcss-flyonui-artifacts-extractor

# Clean up old assets
rm -rf ./{dist,target}
mkdir -p ./{dist,target}/{js,css}

# Install your dependencies (you need npm or bun)
# This brings down the latest versions of all the dev dependencies 
# npm install
bun install
# Sample output, yours may vary
# + @iconify/[email protected]
# + @iconify/[email protected]
# + @tailwindcss/[email protected]
# + @types/[email protected]
# + [email protected]
# + [email protected]
# + [email protected]
# + [email protected]
# + [email protected]
# + [email protected]
# + [email protected]

# Place the latest FlyonUI JavaScript file (to create the full-bundle)
# Copy `flyonui.js` from node_modules source folder
cp ./node_modules/flyonui/flyonui.js ./target/js/flyonui.js

# Generate your static resources for FlyonUI
# npx postcss src/css/main.css --output target/css/tailwind-plus-flyonui.css
bunx  postcss src/css/main.css --output target/css/tailwind-plus-flyonui.css

# Copy artifacts from /target to /dist folder
cp ./target/css/tailwind-plus-flyonui.css ./dist/css/;
cp ./target/js/flyonui.js ./dist/js/;

# Let's bundle it for your use in your project
# tar -czvf ./dist/flyonui-static-resources.tar.gz ./dist/
zip -r ./dist/flyonui-static-resources.zip ./dist/

# Depending upon if you used zip or tar you will 
# find the end result in one of the two bundles:
./dist/flyonui-static-resources.zip 
# or
./dist/flyonui-static-resources.tar.gz

# Rinse and repeat as needed

Option-3: Full explanation with step-by-step

In this option, we dive into the magic: I will explain exactly how to extract and bundle standalone CSS and JavaScript from Tailwind CSS and FlyonUI frameworks.

Base setup

Pre-requisites:

1. Install Bun.
2. Install npm.
3. Install caddy for our temporary standalone webserver (only used for verification).

During my setup, here are the versions that I had on my system:

bun --version
1.3.5
npm --version
11.6.2
node --version
v24.12.0

Scaffolding setup

1. Create a bun <blank> project.

bun init tailwindcss-flyonui-artifacts-extractor

Expected Output:

✓ Select a project template: Blank

+ .gitignore
+ CLAUDE.md
+ index.ts
+ tsconfig.json (for editor autocomplete)
+ README.md

To get started, run:

    bun run index.ts

bun install v1.3.5 (1e86cebd)

+ @types/[email protected]
+ [email protected]

5 packages installed [405.00ms]

This creates a starter bun project using the blank template. We will now move onto setting up the base configuration elements.

2. Let’s modify the created artifacts to a simple html construct.

# Remove line '"type": "module",' (one-liner) from package.json
cat <<EOF > ./package.json
{
  "name": "hello-world",
  "module": "index.ts",                                                                                               "private": true,
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5"
  }
}
EOF

# Remove index.ts
rm ./index.ts

# Remove tsconfig.json - since we do not plan to use any TypeScript aspects for this
rm ./tsconfig.json

# Let's create the source and target folders
mkdir -p ./src/css
mkdir -p ./target/{css,js}
mkdir -p ./dist/{css,js}

# Create a new index.html with a simple HTML template with our TailwindCSS and FlyonUI Test HTML artifacts.
# This will help us determine if everything is working as expected in the generated stylesheets
cat <<EOF > ./index.html
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Extraction of FlyonUI style sheets</title>
    <style>
        body {
            margin: 20px; /* Adds 20px margin to all sides */
        }
    </style>
</head>
<body>
    <h1 class="text-2xl font-bold underline text-red-600 dark:text-red-400">
    Hello world!
    </h1>
    <br/>

    This is a TailwindCSS Button:<br/>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
    </button>
    <hr/>
    This is a FlyonUI Button:<br/>
    <button class="btn btn-primary rounded-full">Button2</button>
    <hr/>
    Collapsed and expanded variation:
    <button type="button" class="collapse-toggle btn btn-primary" id="basic-collapse" aria-expanded="false" aria-controls="basic-collapse-heading" data-collapse="#basic-collapse-heading" >
    <span class="collapse-open:hidden">Collapsed</span>
    <span class="collapse-open:block hidden">Collapse</span>
    <span class="icon-[table--chevron-down] collapse-open:rotate-180 transition-rotate size-4 duration-300"></span>
    </button>
    <div id="basic-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-collapse" >
    <div class="border-base-content/25 mt-3 rounded-md border p-3">
        <p class="text-base-content/80">
        The collapsible body remains hidden until the collapse plugin adds specific classes. These control appearance and
        manage visibility through transitions.
        </p>
    </div>
    </div>
</body>
</html>
EOF

3. Let’s render the test HTML in a browser.

   Please note that when you render all the elements will not work as anticipated. We are first creating a ‘fail-all’ test and we will slowly introduce Tailwindcss first and then FlyonUI themes.

   Let us create a Caddy webserver static file server.

   Add a caddyfile with the following content:

cat <<EOF > ./caddyfile
localhost
file_server
EOF

Let’s fire up the Caddy webserver:

caddy run --watch

In a browser open and visit: https://localhost/.

NOTE: You should see an unstyled page where the buttons will look like plain unstyled HTML page.

Adding the styles

4. Install preprocessor/dependent packages:

# npm install -D tailwindcss @tailwindcss/postcss flyonui @iconify/tailwind4 @iconify/json postcss postcss-cli autoprefixer postcss-import 
bun   install -D tailwindcss @tailwindcss/postcss flyonui @iconify/tailwind4 @iconify/json postcss postcss-cli autoprefixer postcss-import 

5. We will use Postcss and some of the Postcss plugins to do the preprocessor magic.

Create a postcss.config.js and add the following contents:

cat <<EOF > ./postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('autoprefixer')({
      overrideBrowserslist: ['> 0.5% in US', 'Safari > 9'] // Example browser list
    }),
    require('@tailwindcss/postcss')({}),
    // Add other plugins here (e.g., require('cssnano') for minification)
  ]
};
EOF

This configures the postcss with the three plugins (import, autoprefixer, tailwindcss/postcss)

Let’s begin generating the stylesheets.

Generating the TailwindCSS style sheets.

Create a \src\css\main.css with the needed ‘@import’ for TailwindCSS.

cat <<EOF > ./src/main.css
@import "tailwindcss";
EOF

This will bring down the needed Tailwindcss pieces and place them into the main.css when you run Postcss (after you run the Postcss preprocessor step).

Let’s generate the Tailwindcss stylesheet.

# npx postcss src/css/main.css --output target/css/tailwind-only.css
bunx  postcss src/css/main.css --output target/css/tailwind-only.css

You should now have the base Tailwindcss stylesheet under ./dist/css/. Below is a sample screenshot of how the file contents may look like. (Your output may vary)

As of writing this article, Tailwindcss does not have any JavaScript scripts that are utilized for any front-end. Therefore no JS is generated.

Onto generating the FlyonUI parts.

Let’s verify what we get.

Let’s add the newly generated stylesheet to the index.html file.

In this step, we are simply adding in one stylesheet reference to the HTML:

<link href="/target/css/tailwind-only.css" rel="stylesheet">

cat <<EOF > ./index.html
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Extraction of FlyonUI style sheets</title>
    <link href="/target/css/tailwind-only.css" rel="stylesheet">
    <style>
        body {
            margin: 20px; /* Adds 20px margin to all sides */
        }
    </style>
</head>
<body>
    <h1 class="text-2xl font-bold underline text-red-600 dark:text-red-400">
    Hello world!
    </h1>
    <br/>

    This is a TailwindCSS Button:<br/>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
    </button>
    <hr/>
    This is a FlyonUI Button:<br/>
    <button class="btn btn-primary rounded-full">Button2</button>
    <hr/>
    Collapsed and expanded variation:
    <button type="button" class="collapse-toggle btn btn-primary" id="basic-collapse" aria-expanded="false" aria-controls="basic-collapse-heading" data-collapse="#basic-collapse-heading" >
    <span class="collapse-open:hidden">Collapsed</span>
    <span class="collapse-open:block hidden">Collapse</span>
    <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 transition-rotate size-4 duration-300"></span>
    </button>
    <div id="basic-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-collapse" >
    <div class="border-base-content/25 mt-3 rounded-md border p-3">
        <p class="text-base-content/80">
        The collapsible body remains hidden until the collapse plugin adds specific classes. These control appearance and
        manage visibility through transitions.
        </p>
    </div>
    </div>
</body>
</html>
EOF

Now if you reload the site in your browser, you should see the change with TailwindCSS now rendering correctly (as shown below)

Generating the FlyonUI stylesheet and JavaScript

As of writing this article, FlyonUI combines three other frameworks:

From the FlyonUI website:

FlyonUI brings together the beauty of semantic classes and the interactive headless JavaScript plugins, offering you a powerful toolkit to build stunning, interactive user interfaces with ease.

Under the hood, it uses the strengths of:

• Tailwind CSS: A utility-first CSS framework that helps you build beautiful websites with ease. (Generates CSS only).
• daisyUI adds component semantic class names to Tailwind CSS so you can make beautiful websites faster, easier and Maintainable. (Generates CSS only).
• Preline JavaScript headless & fully unstyled Tailwind plugins for accessible, responsive UI. Enhance experiences with animations, transitions, and more. (Generates CSS plus JavaScript).

Let’s modify the /src/css/main.css to now include the needed other framework preprocessor artifacts:

cat <<EOF > ./src/css/main.css
@import "tailwindcss";
@import "../../node_modules/flyonui/variants.css";

@plugin "flyonui";
@plugin "@iconify/tailwind4";

@source "../../node_modules/flyonui/dist/index.js";
EOF

Please note that the above segment adds also the FlyonUI “variant.css” and it’s supporting JavaScript files “index.js”.

Let’s generate the Tailwind plus FlyonUI artifacts:

# npx postcss src/css/main.css --output target/css/tailwind-plus-flyonui.css
bunx  postcss src/css/main.css --output target/css/tailwind-plus-flyonui.css

Let’s verify what we get.

Let’s add the newly generated stylesheet to the index.html file along with the dependent flyonui.js

In this step, we are simply adding in one stylesheet reference to the HTML:

<link href="/target/css/tailwind-plus-flyonui.css" rel="stylesheet"> and <script src="/target/js/flyonui.js"></script>

# Copy `flyonui.js` from node_modules source folder
cp ./node_modules/flyonui/flyonui.js ./target/js/flyonui.js

cat <<EOF > ./index.html
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Extraction of FlyonUI style sheets</title>
    <link href="/target/css/tailwind-plus-flyonui.css" rel="stylesheet">
    <script src="/target/js/flyonui.js"></script>
    <style>
        body {
            margin: 20px; /* Adds 20px margin to all sides */
        }
    </style>
</head>
<body>
    <h1 class="text-2xl font-bold underline text-red-600 dark:text-red-400">
    Hello world!
    </h1>
    <br/>

    This is a TailwindCSS Button:<br/>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
    </button>
    <hr/>
    This is a FlyonUI Button:<br/>
    <button class="btn btn-primary rounded-full">Button2</button>
    <hr/>
    Collapsed and expanded variation:
    <button type="button" class="collapse-toggle btn btn-primary" id="basic-collapse" aria-expanded="false" aria-controls="basic-collapse-heading" data-collapse="#basic-collapse-heading" >
    <span class="collapse-open:hidden">Collapsed</span>
    <span class="collapse-open:block hidden">Collapse</span>
    <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 transition-rotate size-4 duration-300"></span>
    </button>
    <div id="basic-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="basic-collapse" >
    <div class="border-base-content/25 mt-3 rounded-md border p-3">
        <p class="text-base-content/80">
        The collapsible body remains hidden until the collapse plugin adds specific classes. These control appearance and
        manage visibility through transitions.
        </p>
    </div>
    </div>
</body>
</html>
EOF

Now if you reload the site in your browser, you should see the change with TailwindCSS now rendering correctly (as shown below)

Summary

In this guide, I have walked you through the journey of transforming a plain static HTML file into a professional dashboard by integrating TailwindCSS and FlyonUI artifacts. My goal was to provide a clear pathway for Go and Python developers to leverage modern UI frameworks without the burden of a dedicated Node.js frontend server.

By following my extraction process, you now have the standalone stylesheets and JavaScript files needed to power your backend-driven website. This setup specifically utilizes the following versions to deliver a rich, interactive experience:

• TailwindCSS (v4.1.18) for utility-first styling.
• FlyonUI (v2.4.1) for semantic components.
• Iconify (v1.2.0) for integrated iconography.

If you need to update your UI resources in the future, I have outlined how to easily rebuild them using the Bun runtime and PostCSS. This ensures that your project stays current while your deployment architecture remains simple, efficient, and focused on your primary backend logic.

Using the artifacts that you created, you are now off to building great dashboard sites such as the images below all driven by either Python or Golang or Rust:

I hope this article has been useful for you. If you like this article, please consider resharing this article in your favorite social post.

The blog I run can be found here: DigitalRiver.blog

Thanks for checking out. Cheers.