Tailwind

Use Tailwind CSS utility classes in Format Studio documents.

Supported frameworks

Framework	Supported
React
Vue
HTML

Installation

Install the Tailwind CSS package.

npm install tailwindcss --save-dev

pnpm add tailwindcss --save-dev

yarn add tailwindcss --dev

bun add tailwindcss --dev

Usage

Import Tailwind into a stylesheet.

documents

invoice

styles.css

index.tsx

documents/invoice/styles.css

@import 'tailwindcss';

.custom-class {
	@apply rounded-b-lg shadow-md;
}

@layer utilities {
	.peach {
		background: peachpuff;
	}
}

Make sure the stylesheet is imported into your document entry point. This import only needs to be done once, in the entry file.

documents/invoice/index.tsx

import { Document, Layout } from '@format.dev/react'
import './styles.css'

export default function Invoice () {
	return (
		<Document title="Invoice">
			<Layout id="invoice" width={793.71} height={1122.52}>
				<div className='peach custom-class m-2 flex'>
					Hey, 🍑
				</div>
			</Layout>
		</Document>
	)
}

Import Tailwind into a stylesheet.

documents

invoice

styles.css

index.vue

documents/invoice/styles.css

@import 'tailwindcss';

.custom-class {
	@apply rounded-b-lg shadow-md;
}

@layer utilities {
	.peach {
		background: peachpuff;
	}
}

Make sure the stylesheet is imported into your document entry point. This import only needs to be done once, in the entry file.

documents/invoice/index.vue

<script setup lang="ts">
import { Document, Layout } from '@format.dev/vue'
</script>

<template>
	<Document title="Invoice">
		<Layout id="invoice" :width="793.71" :height="1122.52">
			<div class="peach custom-class m-2 flex">
				Hey, 🍑
			</div>
		</Layout>
	</Document>
</template>

<style>
	@import './styles.css'; 
</style>

Import Tailwind into a stylesheet.

documents

invoice

styles.css

index.html

index.ts

documents/invoice/styles.css

@import 'tailwindcss';

.custom-class {
	@apply rounded-b-lg shadow-md;
}

@layer utilities {
	.peach {
		background: peachpuff;
	}
}

Make sure the stylesheet is imported into your document entry point. This import only needs to be done once, in the entry file.

documents/invoice/index.ts

export { default } from './index.html'
import './styles.css'

documents/invoice/index.html

<template data-type="document" data-title="Invoice">
	<template data-type="layout" data-id="invoice" data-width="793.71px" data-height="1122.52px">
		<div class="peach custom-class m-2 flex">
			Hey, 🍑
		</div>
	</template>
</template>

Fonts

Point Tailwind's font property overrides back to the Format's built-in families with an @theme block:

documents/invoice/styles.css

@import 'tailwindcss';

@theme {
	--font-sans: var(--font-sans-system);
	--font-serif: var(--font-serif-system);
	--font-mono: var(--font-mono-system);
}

Was this page helpful?