AbsoluteJS

Tailwind CSS

Integrate Tailwind CSS with AbsoluteJS for utility-first styling.

#Build Configuration

Enable Tailwind CSS by providing the config and CSS paths in your build:

TS
// absolute.config.ts
import { defineConfig } from '@absolutejs/absolute';

export default defineConfig({
  reactDirectory: 'src/frontend',
  tailwind: {
    input: './src/styles/globals.css',
    output: './build/styles.css'
  }
});

#Tailwind Config

Create a standard Tailwind configuration file:

TS
// tailwind.config.ts
import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#A0E7E5',
        secondary: '#B4F8C8'
      }
    }
  },
  plugins: []
} satisfies Config;

#CSS File

Create your CSS entry point with Tailwind directives:

CSS
/* src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom styles */
@layer components {
  .btn-primary {
    @apply bg-primary text-black px-4 py-2 rounded-lg;
  }
}