NxQuik

Example: qwik + NX + tailwindcss + DaisyUI

---

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

---

Why do we need this?

A paradigm shift is happening in the frontend world. We are moving away from the traditional way of building web applications with frameworks like Angular, React, Vue, etc. to a new way of building web applications with a new set of tools like qwik, Astro, SolidJS. Apart from the rise of Meta Frameworks like NextJS and NuxtJS, just to name few. (NextJS 13 and React 18 Server Components is amazing). Even in the Angular world, things are changing. We have Standalone Components, Vite, Signals and with AnalogJS bringing SSR and SSG to Angular.

I know it's a lot to take in, but it's happening now and my feeling is that I need a playground to test all these new tools and frameworks. I will do it here with qwik, because "Resumability" (see Think Quik) is an awesome idea and I want to see how it works in the real world.

What is it?

Playground and starter project for qwik + NX + tailwindcss + DaisyUI

This is a "work in progress project", so I will add more features as I go along.

Features

• Basic setup of qwik + NX + tailwindcss + DaisyUI
• Styling with tailwindcss and DaisyUI + PostCSS nesting
• Using QwikCity for routing
• Using animate.css for animations
• Build and Dev Server with nx
• Using QwikCity for state management
• I18n with qwik

To be continued...

Basic Setup

The basic setup is done with the following commands:

# Create a new workspace
npx create-nx-workspace@latest nx-quik --preset=empty
npx nx generate qwik-nx:app

In order to use tailwindcss and DaisyUI, we need to install the following packages:

npx nx generate qwik-nx:setup-tailwind
npm install --save-dev daisyui

Styling

Tailwind, DaisyUI and PostCSS

Add daisyui to the tailwind.config.js file:

const { join } = require('path');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')],
  theme: {
    extend: {},
  },
  daisyui: {
    themes: [
      {
        dark: {
          ...require('daisyui/src/colors/themes')['[data-theme=dark]'],
          primary: '#3B82F6',
          'primary-focus': '#1e3a8a',
          secondary: '#78350f',
          accent: '#FFFFFF',
          neutral: '#262833',
          'base-100': '#3C3F50',
        },
      },
    ],
  },
  plugins: [
    require('daisyui'),
  ],
};

Add the following to the postcss.config.js file to switch on PostCSS nesting:

const { join } = require('path');

module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    autoprefixer: {},
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
  },
};

Webstorm users need to switch to Style Sheets -> Dialects -> PostCSS.

Animate.css

Just import the css file in global.css - before the tailwindcss import:

@import "animate.css/animate.min.css";
@tailwind components;
@tailwind base;
@tailwind utilities;

and add it where you need it:

<div class="animate__animated animate__bounce">...</div>

Further help

Visit the Quik Documentation

Visit the Nx Documentation

Visit the Nx quik Plugin Documentation

Visit the DaisyUI Documentation

Visit the Animate.css Documentation