• Nimiq CSS

Nimiq CSS in TailwindCSS ​

Add Nimiq CSS to your TailwindCSS project.

IMPORTANT

Unfortunately, Nimiq CSS is not available as a TailwindCSS plugin. However, you can still use Nimiq CSS in your project by doing one of the following:

Importing the CSS ​

In your entry CSS file, import the Nimiq CSS file:

css
@import url('nimiq-css/css/index.css') @layer nq-all;

/* Or if you prefer import specific layers only */
/* @import url('nimiq-css/css/typography.css') @layer nq-typography; */

@import 'tailwindcss';
css
@import url('nimiq-css/css/index.css') @layer nq-all;

/* Or if you prefer import specific layers only */
/* @import url('nimiq-css/css/typography.css') @layer nq-typography; */

@tailwind base;
@tailwind components;
@tailwind utilities;

CAUTION

With this approach, you will be missing a bunch of stuff like the colors or good DX for the utilities.

You can add the missing colors to your theme manually. Check out colors.css for the color palette.

Migrating to UnoCSS ​

You can think of Tailwind as MacOS and UnoCSS as Linux. They are both great, but they have different philosophies:

Feature CategoryFeatureTailwindUnoCSS
DevelopmentDeveloper Experience👍 Good🚀 Excellent
Build Performance⚡️ Amazing (v4)⚡️ Amazing
CustomizationTheme Customization🔧 Complex🎯 Simple
Custom Rules🔧 Complex✨ Flexible
Preset Extension🟡 Limited💫 Extensive
FeaturesSyntax Options📝 Class-based🎨 Multiple*
Web Fonts🔧 Manual Setup🤖 Auto-loading
Icons Support🔧 Manual Setup🤖 Auto-loading
Dark Mode✅ Built-in✅ Built-in
Built-in playground❌ No✅ Yes
EcosystemCommunity Size🌟 Massive📈 Growing
Documentation📚 Extensive📖 Good
Third-party Tools🛠️ Abundant🔨 Growing

* Including class-based, attributify, pure CSS, and CSS-in-JS

The migration is straightforward: Install UnoCSS and add the Tailwind preset to your configuration file: wind4 or wind3.

Then, you can start using Nimiq CSS in UnoCSS.

Create a TailwindCSS Plugin ​

You can create a PR to add Nimiq CSS as a TailwindCSS plugin. Check out the TailwindCSS documentation and the UnoCSS preset implementation for inspiration.

Changelog