Tailwind CSS integration

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.

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.

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

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

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

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),
};

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 and color mode 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 for l and xl viewport sizes.

You can check an integration example in our community repository: