@adaptavant/core@0.0.9

This is the first official release of Earth that makes use of Tailwind CSS.

To use the latest version, you will need to install Tailwind and it's dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

In the Tailwind config file, add our preset using the createPreset function, passing it tokens from your chosen brand.

You will also need to update the content array to include paths for your template files, as well as the components from Earth in node_modules.

/* tailwind.config.js */

const { tokens } = require('@adaptavant/brands/dist/brands/setmore');
const { createPreset } = require('@adaptavant/core/tailwind');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}', // update this to provide the location of your templates
    './node_modules/@adaptavant/core/dist/**/*.{js,ts,jsx,tsx}', // this is the location of the React components for Earth
  ],
  presets: [createPreset(tokens)], // using the Earth preset configures Tailwind to use our custom classes
  theme: {
    extend: {},
  },
  plugins: [],
}

We recommend following the Tailwind installation guide for any other framework-specific configuration.

Patch Changes​

  • a66d38d: - Update shadow token names and add Tailwind classes for them
    • Update createPreset function signature
  • 4695e5c: Remove label part from Chip
  • 2598597: Add SetmoreColorIcon and allow tertiary as icon tone. Add 'hover:text-decoration': 'none', 'border-width': 'none' & 'background-color': 'neutralPressed' to sx. Make 'border-color', 'border-style' & 'border-width' responsive in sx.
  • bd8b170: Add new DropdownMenu component to experimental entrypoint
  • 90cb8c8: Removing booking app brand and setting setmore brand's default button font weight to strong.
  • c992f9c: Port Tooltip styles to Tailwind
  • f3b004e: Updated adornment positioning of text input from inline-flex to flex
  • 3675bca: Updated root to add light/dark class depending on colorScheme prop. Updated colors.ts to support both class and media query dark mode approaches.
  • 3239a7d: Renamed input size names from small to standard and standard to large. Updated checkbox and radio size.
  • 06c2363: Updated fontWeight values - 'bold' is now 'strong' and 'extrabold' is now 'stronger'.
  • 4695e5c: Update Text component to use Tailwind styles
  • 5041cfd: Updated Google and Facebook icons. Updated large buttons icon size from 24px to 20px.
  • 8541b12: Updated inputs to a neutral active and focus styles
  • 0344861: Update icons
  • f4fdc04: Add useCopyToClipboard to core utils
  • a398b2b: Add border-radius plugin to Tailwind
  • d9aac38: Update dependencies
  • 9ba6e77: Rename sx to deprecated_sx
  • 0674285: sx updates: Added 'normal' value to 'white-space' token. Added 'wrap-reverse' to 'flex-wrap' token.
  • 02be82f: Add lineClamp prop to Heading
  • aafae89: Add Tailwind preset
  • 37c44e4: Remove initialContent prop from Tooltip
  • 3660f1a: Update API of components that accept an icon as a prop
  • bd8b170: Add auto to inset in sx