Colors

Extended Colors

Tailwind Mobile extends Tailwind config with the following colors:

NameValue
primary#007aff
primary-light#298fff
primary-dark#0066d6
page-ios-light#efeff4
page-ios-dark#000
page-material-light#fff
page-material-dark#121212
block-strong-light#fff
block-strong-dark#1c1c1d
list-divider-light#f4f4f4
list-divider-dark#232323
bars-ios-light#f7f7f8
bars-ios-dark#121212
bars-material-light#fff
bars-material-dark#202020
toast-ios#000000
toast-material#323232
popover-light#ffffff
popover-dark#1c1c1d

Most of these colors are configurable on per component basis. And to overwrite them globally with custom ones, you need to extend them in tailwind.config.js:

const tailwindMobileConfig = require('tailwind-mobile/config');

module.exports = tailwindMobileConfig({
  // extend Tailwind Mobile colors in config's `theme.extend.colors`
  theme: {
    extend: {
      colors: {
        'page-ios-light': '#fff';
        'primary': {
          light: '#ff5676',
          DEFAULT: '#ff2d55',
          dark: '#ff0434',
        }
      }
    }
  }
})

Generate Theme Colors

Main theme color is defined by primary colors (primary, primary.dark and primary.light).

Below you can find color generator to help you with "light" and "dark" shades:

Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.