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

Import the theme definition

In the CSS file that imports Tailwind CSS, also import the theme definition from your core Reshaped theme. This will extend the default Tailwind CSS variable values with those provided by the theme.

In the following example, we import the default theme provided by Reshaped. All custom themes built on your product side should also include the same tailwind.css file, which you can import. Note that you only need to import a single theme definition, rather than doing so for each theme used.

@import "tailwindcss";
@import "reshaped/themes/reshaped/tailwind.css";

If you want to use only Reshaped tokens and exclude the default values provided by Tailwind, you can reset them. For example, to reset all colors:

@import "tailwindcss";
@theme {
  --color-*: initial;
}

@import "reshaped/themes/reshaped/tailwind.css";

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 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:

Tailwind CSS example

External resource

Tailwind v3

For the previous major version of TailwindCSS, use the JS configuration. Start by extending the Reshaped PostCSS configuration with the TailwindCSS setup:

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

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

Then extend the TailwindCSS configuration with the theme definition provided by Reshaped. 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),
};

Remix

Vite