Migration from Tailwind CSS

A guide for migrating your project from Tailwind CSS to Apex.

Similar Syntax

Apex uses a very similar syntax to Tailwind CSS, making migration straightforward.

Class Name Changes

Most class names are identical between Tailwind and Apex. Here are some differences:

Tailwind	Apex
flex	flex
grid	grid
hidden	hidden
block	block
rounded	rounded
shadow	shadow

Configuration

Update your configuration file:

// tailwind.config.js (old)
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

// config.js (new)
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    colors: {
      primary: '#3b82f6',
    },
  },
  utilities: {
    spacing: true,
    colors: true,
    typography: true,
  },
}

Build Process

Update your build scripts:

JSON

// package.json
{
  "scripts": {
    "build": "apexcss build",
    "watch": "apexcss watch"
  }
}