Frameworks

All JS frameworks

All styles in Fulldev UI use regular CSS and classes. Classes use the following naming convention:

• Component classes are the same as the component name, like button for <Button>.
• Prop classes have the prop name as prefix, like variant-primary for <Button variant="primary">.
• If a prop is a boolean the class is added without a prefix, like contrast.
• To prevent conflicts, all styles only apply if there is a full class on the element too.

This means you can apply Fulldev UI styles to any framework component as follows:

---
import Button from 'fulldev-ui/components/Button.astro'
---

<a class="full button variant-solid contrast radius-auto"> Button </a>
<Button contrast> Button </Button>

CSS frameworks

All Fulldev UI styles have low specificity, because they are in a native CSS fulldev layer. This means you can overwrite them with any CSS framework.

The only thing to be aware of is that styles you want Fulldev UI to overwrite (like a reset), should be in a native CSS base layer.

:::note CSS layers are a baseline CSS feature since 2022. Tailwind V4 will use them by default and others will probably follow. Therefore, over time you would not need to do any setup with Fulldev UI. :::

Tailwind

You can place Tailwind’s base styles in a native CSS base layer as follows:

1. Set applyBaseStyles to false in the tailwind configuration.

// astro.config.mjs

import { defineConfig } from 'astro/config'
import tailwind from '@astrojs/tailwind'

export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
  ],
})

2. Manually import Tailwind CSS into your project, making sure the base layer is in an actual native CSS layer.

@import 'tailwindcss/base' layer(base);
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Plugin

We have created a plugin to utilize fulldev-ui styles with tailwindcss on top of tailwind classes. Installation is pretty simple:

// tailwind.config.ts
import fulldevUI from 'fulldev-ui/tailwind'

export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  plugins: [fulldevUI],
}

You can now start using the following in your project on top of tailwind classes like pt-space-1, rounded-radius-1, or bg-variant. For all availabilities see plugin classes.

UnoCSS

UnoCSS does not inject base/reset styles by default. Fulldev UI does not rely on style resets, so you you don’t need them, you’re done here.

If do need a reset, make sure you import it in a native CSS base layer. For example:

@import '@unocss/reset/tailwind.css' layer(base);

Preset

We have created a preset to utilize fulldev-ui styles with unocss. Installation is pretty simple:

// uno.config.ts
import { defineConfig } from 'unocss'
import fulldevUI from 'fulldev-ui/unocss'

export default defineConfig({
  presets: [fulldevUI],
})

You can now start using the following in your project on top of tailwind classes like pt-space-1, rounded-radius-1, or bg-variant. For all availabilities see plugin classes.

Plugin classes

The following classes are available when using the Tailwind plugin or UnoCSS preset.

Spacing

You can use these classes for paddings, margins, heights, widths etc.

All space classes are dynamic and adapt to the size and compact props on Fulldev UI components.

• ...-space-1
• ...-space-2
• ...-space-3
• ...-space-4
• ...-space-5
• ...-space-6
• ...-space-7

Font size

All font size classes are dynamic and adapt to the size and compact props on Fulldev UI components.

• text-1
• text-2
• text-3
• text-4
• text-5
• text-6
• text-7

Border radius

The border radius classes are also dynamic, adapting to size and compact props on Fulldev UI components.

• rounded-1
• rounded-2
• rounded-3

Color classes

The following colors are avaiable and adapt to theme, color, contrast and variant props. Therefore you only need 3 colors.

• ...-background
• ...-border
• ...-text

You can use them like bg-background, border-border and text-text. But you can also do bg-text if you like.

We know the naming feels a bit weird, but at least for now we will stick with this.

Other CSS frameworks

Make sure all styles you want Fulldev UI to overwrite are in a native CSS base layer. That’s it.