Phoenix Tech Lab

Appearance

Tailwind Theme ​

To generate a Tailwind theme, follow these steps:

  • Go to UI Colors.
  • Add your base color. The tool will generate shades that you can incorporate into your tailwind.config.js file.

The theme structure should be as follows:

ts
// tailwind.config.ts
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    colors: {
      primary: {
        50: '#fef7ee',
        100: '#fdeed7',
        // 200 - 800
        900: '#763218',
        950: '#40170a',
      },
      secondary: {
        // Define secondary color values
      },
      tertiary: {
        // Define tertiary color values
      },
      grey: {
        50: '#FFF', // Always white 
        // Define grey color values
        950: '#000' // Always black
      },
    },
    fontFamily: {
      sans: ['fontHere', 'sans-serif'],
    },
  },
  plugins: [],
};
// tailwind.config.ts
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    colors: {
      primary: {
        50: '#fef7ee',
        100: '#fdeed7',
        // 200 - 800
        900: '#763218',
        950: '#40170a',
      },
      secondary: {
        // Define secondary color values
      },
      tertiary: {
        // Define tertiary color values
      },
      grey: {
        50: '#FFF', // Always white 
        // Define grey color values
        950: '#000' // Always black
      },
    },
    fontFamily: {
      sans: ['fontHere', 'sans-serif'],
    },
  },
  plugins: [],
};