Migrating reset to Tailwind

[hyperknot]

I'm migrating my reset from StyleX from Tailwind 4.

In StyleX I used a full reset written by myself. In Tailwind, I'm trying to use the build in preflight and only add the lines I haven't found inside.

Does this look OK?

./_stylesheet.css
---
@import "tailwindcss";
@import "./custom_reset.css";
@import "./variables.css";


---
./custom_reset.css
---
@layer base {
  html {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  ::selection {
    background: var(--select-text-color);
  }
}


---
./variables.css
---
@layer theme {
  :root {
    /* colors */
    /*--select-text-color: #c3d1f7; !*softblue6*!*/
    /*--select-text-color: #9ccce4;*/
    /*--select-text-color: #e1e9ff; !* indigo4 *!*/
    /*--select-text-color: #d2deff; !* indigo5 *!*/
    /*--select-text-color: #c1d0ff; !* indigo6 *!*/
    --select-text-color: var(--color-indigo-200);

    /* Scrollbar customization */
    --scrollbar-width: 12px;
    --scrollbar-min-size: 32px;
    --scrollbar-color: rgba(0, 0, 0, 0.2);
    --scrollbar-hover-color: rgba(0, 0, 0, 0.3);
  }
}

Does the order matter for these? Is it the right way of using var(--color-indigo-200)?

[wongjn]

Seems fine to me 👍