At this point you should already have a Reshaped project up and running. In case you don't have it ready yet – follow the installation documentation based on the framework you're using before you continue with the Tailwind CSS setup.

Initialise Tailwind

Start by adding Tailwind CSS setup to your project if don't have it working yet. You can follow Tailwind CSS official documentation on how to setup your project based on the framework you're using.

Tailwind CSS installation

External resource

For setting the PostCSS part, you will need to combine both configs together:

const config = require("reshaped/config/postcss");

module.exports = {
  plugins: {
    ...config.plugins,
    tailwindcss: {},
    autoprefixer: {},
  },
};

Extend Tailwind config

In your tailwind.config.js, import the theme definition from Reshaped and pass it to the theme property.

const { getTheme } = require("reshaped/config/tailwind");

module.exports = {
  ...
  theme: getTheme(),
};

This will override the default Tailwind CSS config with the design tokens provided by Reshaped. It includes backgroundColor, textColor, borderColor, borderRadius, boxShadow, spacing and screens utilities.

In case you want to keep the default config and just add Reshaped design tokens as additional utilities, you can extend the config instead:

const { getTheme } = require("reshaped/config/tailwind");

module.exports = {
  ...
  theme: {
    extend: getTheme(),
  }
};

If you have extended the default theme definition and added custom design tokens to the config, you can pass your own theme definition to the getTheme function. It will add all your custom tokens as Tailwind utilities as well.

const reshapedConfig = require("./reshaped.config")
const { getTheme } = require("reshaped/config/tailwind");

module.exports = {
  ...
  theme: getTheme(reshapedConfig.themes.customTheme),
};

Start using Tailwind CSS

You can start using Tailwind CSS utilities anywhere in your application.

<div class="bg-neutral-faded rounded-small p-x4 l:p-x6" />

When using Reshaped tokens, you don't need to apply dark: variant. All colors are resolved to the correct value automatically based on the theme you use in Reshaped provider.
Since we provide breakpoint values as design tokens in Reshaped, you can easily use them with Tailwind with a screen variant. For example l: will apply the styles starting from large screens.

You can check an integration example in our community repository:

Tailwind CSS example

External resource

Contents

Initialise Tailwind
Extend Tailwind config
Start using Tailwind CSS