Tailwind.css with material-ish elevation, water.css base, and bootstrap-ish colors.

main.css

@import '../node_modules/water.css/out/water.min.css';
/* @import 'tailwindcss/base'; */ /* base provided by water.css */
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Override water.css opinionated settings. */
body {
  max-width: initial;
}

/* Bootstrap-ish color theme */
@mixin light {
  --color-primary: hsl(240, 85%, 35%);
  --color-secondary: hsl(240, 15%, 35%);
  --color-info: hsl(200, 85%, 35%);
  --color-success: hsl(120, 85%, 35%);
  --color-warning: hsl(30, 85%, 35%);
  --color-danger: hsl(0, 85%, 35%);
}
@mixin dark {
  --color-primary: hsl(240, 85%, 65%);
  --color-secondary: hsl(240, 15%, 65%);
  --color-info: hsl(200, 85%, 65%);
  --color-success: hsl(120, 85%, 65%);
  --color-warning: hsl(30, 85%, 65%);
  --color-danger: hsl(0, 85%, 65%);
}

:root,
.light {
  @include light;
}
.dark {
  @include dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    @include dark;
  }
  img {
    opacity: 0.75;
    transition: opacity 0.25s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

/* tailwindcss-elevation */
:root {
  --color-shadow: 54, 54, 54;
  --color-backdrop: 219, 219, 219;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-shadow: 219, 219, 219;
    --color-backdrop: 54, 54, 54;
  }
}

package.json

{
  "devDependencies": {
    "tailwindcss": "latest",
    "tailwindcss-elevation": "latest",
    "water.css": "latest"
  }
}

tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {
      colors: {
        /* water.css variables: https://github.com/kognise/water.css/blob/master/src/variables-light.css */
        background: {
          default: 'var(--background)',
          body: 'var(--background-body)',
          alt: 'var(--background-alt)',
          hover: 'var(--button-hover)',
        },
        selection: 'var(--selection)',
        main: 'var(--text-main)',
        bright: 'var(--text-bright)',
        muted: 'var(--text-muted)',
        links: 'var(--links)',
        focus: 'var(--focus)',
        form: {
          default: 'var(--form-text)',
          placeholder: 'var(--form-placeholder)',
        },
        border: {
          default: 'var(--border)',
        },
        code: 'var(--code)',
        variable: 'var(--variable)',
        highlight: 'var(--highlight)',

        /* bootstrap-ish */
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        info: 'var(--color-info)',
        success: 'var(--color-success)',
        warning: 'var(--color-warning)',
        danger: 'var(--color-danger)',
      },
      screens: {
        day: { raw: '(prefers-color-scheme: light)' },
        night: { raw: '(prefers-color-scheme: dark)' },
      },
    },
  },
  variants: {},
  plugins: [require('tailwindcss-elevation')([], { color: 'var(--color-shadow)' })],
};