Get started

We have quick setup guides for well-known platforms. If you use something else, please let us know!

Before you start

Before you start you will need an .npmrc file that gives access to our private packages. Here’s a recipe for getting an .npmrc in a Makefile.

React + Vite

If you don’t have one yet, scaffold a project, and choose React. Typescript is also recommended.

Styles

Install tailwind and it’s dependencies:

Create a basic tailwind and postcss config:

Install our styles:

Update the tailwind config to include our preset:

Note that if you have CSS-classes in files with other extensions, you need to include these as well in the content list as well, e.g. append './src/**/*.ts', to the list above.

Update the postcss config to include the other plugins we require:

Update your App.css to include our styles:

🎉 Now you can start using tailwind classes and our extensions in your application!

Components

To support React we produce React components that wrap our web components. Install our web components and the React wrapper:

That’s it, you can now use the React components in your app.

Svelte

If you haven’t created a Svelte app yet you can scaffold one quickly:

Styles

Install tailwind and it’s dependencies

Install our styles:

Create a basic tailwind and postcss config:

Update the tailwind config to include our styles preset:

Create a css file and import our styles:

And import the css into your application by adding this to or creating your +layout.svelte:

🎉 Now you can start using tailwind classes and our extensions in your application!

Components

Add our web components to your project:

Add an import to the top level of your app:

Now you can use our web components in your application!

Other platforms

Styles

For other platforms you can read about setting up tailwind here.

Components

Our web components are built using Stencil; you may find some useful information in the Stencil docs.

We publish our web components to a static bucket so they can be used in your HTML using a script tag:

Developer experience

Install the visual studio plugin to get intellisense (autocomplete on css classes available).

Which classes are available?

Defined in tailwind.config.js you find custom colors, fonts and spacing. Besides those extentions, all classes from tailwind are available.

Which classes to use?

Looking at the tailwind docs, you will find margins m-1, m-2 and spacings p-1, p-2 etc.

For consistency, prefer using the defined sizes, like m-xs instead of m-1.