Installation

Create your project

Start by creating a new SvelteKit project if you don't have one set up already:

		pnpm create svelte@latest simba
cd simba
	

Install Centlax UI with Tailwind CSS

Install Centlax UI, tailwindcss, and thier peer dependencies, then tailwind.config.js and postcss.config.js files will be generated.

		pnpm install -D @centlax/ui tailwindcss postcss autoprefixer
npx tailwindcss init -p
	

Enable use of PostCSS in style blocks

In your svelte.config.js file, import vitePreprocess to enable processing style blocks as PostCSS.

		import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter()
	},
	preprocess: vitePreprocess()
};
export default config;
	

Configure Tailwind CSS

Update your tailwind.config.js file to include Centlax UI's preset as starting base

		import centlax from '@centlax/ui/tailwind';
/** @type {import('tailwindcss').Config} */
export default {
	presets: [centlax()]
};
	

Add Tailwind directives

Create a ./src/app.css file and add the @tailwind directives

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

Import the CSS file

Create a ./src/routes/+layout.svelte file and import the app.css file.

		<script>
	import '../app.css';
</script>
 
<slot />
	

Start using Centlax UI

Now you can start using Centlax UI components in your project:

		<script lang="ts">
	import { UButton } from '@centlax/ui';
</script>
 
<UButton class="bg-red-500" label="Click me!" />
	

Start your build process

Run your build process with npm run dev.

		pnpm run dev
	

This setup integrates Centlax UI with Tailwind CSS in your SvelteKit project, allowing you to use Centlax components with custom Tailwind styles.