tailwind.config.js

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')

module.exports = {
  content: [
	'./src/**/*.tsx'
  ],
  theme: {
    extend: {
    	backgroundImage: {
    		blur: 'url(/src/assets/blur-background.png)',
    	},
    	fontFamily: {
    		sans: 'Roboto, sans-serif'
    	},
    	colors: {	
			green: {
				300: '#00B37E',
			    500: '#00875F',
			    700: '#015F43',
			},
			blue: {
			    500: '#81D8F7',
			},
			orange: {
			    500: '#FBA94C',
			},
			red: {
			    500: '#F75A68',
			},
			gray: {
			    100: '#E1E1E6',
			    200: '#C4C4CC',
			    300: '#8D8D99',
			    500: '#323238',
			    600: '#29292E',
			    700: '#121214',
			    900: '#09090A'
			},
			white: {
				100: "#ccc"
			},
			black: {
				100: "#161616"
			},
			transparent: 'transparent',
      		current: 'currentColor',
      		indigo: colors.indigo,
      		yellow: colors.amber,
    	},
    	keyframes: {
    		transitionRight: {
    			'from': { transform: 'translateX(200%)' },
    			'to': { transform: 'translateX(0%)' },
    		}
    	},
    	animation: {
    		'transitionContentToRight': 'transitionRight 1s ease-in-out'
    	}
    },
  },
  plugins: [],
}