tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{ts,tsx,js,jsx}',
    './src/components/**/*.{ts,tsx,js,jsx}',
    './src/sloby-editor-system/**/*.{ts,tsx,js,jsx}',
  ],
  theme: {
    extend: {
      animation: {
        gradientMove: 'gradient_move 8s ease-in-out infinite',
        shake: 'shake 4.72s ease',
      },
      keyframes: {
        gradient_move: {
          '0%, 100%': { 'background-position': '0% 50%' },
          '50%': { 'background-position': '100% 50%' },
        },
        shake: {
          '0%': { transform: 'translate(0,0)' },
          '1.78571%': { transform: 'translate(10px,0)' },
          '3.57143%': { transform: 'translate(0,0)' },
          '5.35714%': { transform: 'translate(10px,0)' },
          '7.14286%': { transform: 'translate(0,0)' },
          '8.92857%': { transform: 'translate(10px,0)' },
          '10.71429%': { transform: 'translate(0,0)' },
          '100%': { transform: 'translate(0,0)' },
        },
      },
      colors: {
        'interface-bg': '#171414',
        'bg-action': '#1D1D1D',
        'action-bg': '#151515',
        'tool-bg-hover': '#202020',
        'tool-bg': '#191919',
        'sloby-tools-bg': '#151515',
        'mod-bg': '#090909',
        'tools-bg': '#121212',
        'editor-border-color': '#202020',
        'dark-steps-bg': '#191919',
        'dark-building-steps-bg': '#101010',
        'dark-preview-hover': '#292929',
        'dark-preview': '#232323',
        'dark-info-bg': 'black',
        'dark-info': '#181818',
        back: '#040404',
        'dark-font-light': '#909090',
        'dark-darkest': '#000000',
        'dark-dark-hover': '#141414',
        'dark-project-bg': 'rgba(0, 0, 0, 0.65)',
        'dark-darker': '#0D0D0D',
        'dark-blur-bg': '#0c0c0c',
        'dark-input-border': 'rgba(0, 0, 0, 0.1)',
        'input-placeholder': '#aaaaaa',
        'input-placeholder-font': '#898989',
        'dark-dark': '#111111',
        'dark-font-mid': '#707070',
        'dark-action-bg': '#090909',
        'dark-dark-mid': '#131313',
        'dark-border': '#202020',
        'dark-mid': '#373737',
        'dark-font-color': '#505050',
        'dark-light': '#cfcfcf',
        'red-dark': '#ff3b3b',
        'red-mid': '#ff5c5c',
        'red-light': '#ff8080',
        'green-dark': '#05c270',
        'green-mid': '#39da8a',
        'green-light': '#57eba3',
        'blue-dark': '#0063f8',
        'blue-perfect': '#0085ff',
        'blue-mid': '#5b8dee',
        'blue-light': '#9dbff8',
        'yellow-dark': '#ffcc00',
        'yellow-mid': '#fedd49',
        'yellow-light': '#feed73',
        blurple: '#4f40ff',
      },
      borderRadius: {
        large: '50px',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        aboreto: ['Aboreto', 'cursive'],
        itim: ['Itim', 'cursive'],
        montserrat: ['Montserrat', 'sans-serif'],
        raleway: ['Raleway', 'sans-serif'],
        roboto: ['Roboto', 'sans-serif'],
      },
    },
    backgroundSize: {
      auto: 'auto',
      cover: 'cover',
      contain: 'contain',
      enlarge: '190%',
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
};