JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="dns-prefetch" href="https://cdn.skypack.dev" />
    <link rel="preconnect" href="https://cdn.skypack.dev" />
    <link rel="prefetch" as="script" type="module" href="https://cdn.skypack.dev/windicss-runtime-dom" crossorigin="anonymous" />
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>WindiCSS Runtime DOM Example</title>
    <meta name="theme-color" content="#112233" />
    
        <!-- WINDICSS -->
    <script>
    window.windicssRuntimeOptions = {
      /**
       * Enable WindiCSS preflight feature
       * @see {@link https://windicss.org/preflight.html}
       */
      preflight: true,
      /**
       * scan the entire dom tree to infer the classnames on initial page load.
       * creates a longer TTFB but prevents FOUC (meaning first load is slower, but when it 
       * pulls into the station you best believe it's lookin fly)
       */
      extractInitial: true,
      /**
       * generate mock classes for browser to do the auto-completeion 
       * set to false to boost performance
       */
      mockClasses: false,
      /**
       * the windi config object usually exported from `windi.config.js`
       */
      config: {
        darkMode: 'media',
        theme: {
          extend: {
            colors: {
              primary: {
                100: "#e4e1fe",
                200: "#cac3fd",
                300: "#ada4fa",
                400: "#968cf6",
                500: "#96BAFF",
                600: "#554bce",
                700: "#3c33ac",
                800: "#27208b",
                900: "#181373"
              },
              success: {
                100: "#f1fcd4",
                200: "#dff9aa",
                300: "#c4ee7d",
                400: "#a7de5a",
                500: "#7fc92a",
                600: "#64ac1e",
                700: "#4b9015",
               ...