Skip to content

Frameworks

Fulldev UI integrates with all CSS and JS frameworks.

All JS frameworks

All styles in Fulldev UI use vanilla CSS and classes. Classes named as follows:

  • Component classes have the component name, like button for <Button>.
  • Props classes have the prop name as prefix, like variant-primary for <Button variant="primary">.
  • All styles only apply if there is a full class on the same element, to prevent conflicts.

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

---
import { Button } from 'fulldev-ui';
---
<a class="full button variant-primary" href=""> Button </a>
<Button href=""> 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.

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';

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);

Other CSS frameworks

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