Nutritious Pomegranate Muffins

    @stitches/vue-directive
    TypeScript icon, indicating that this package has built-in type declarations

    9.0.0-alpha.4 • Public • Published

    Use stitches with Vue

    Read more about stitches at @stitches/css.

    Get started

    npm install @stitches/vue-directive

    // index.tsx
    import Vue from "vue";
    import { createCss } from "@stitches/css";
    
    const css = createCss({
      screens: {
        sm: (cssRule) => `@media (min-width: 768px) { ${cssRule} }`,
        md: (cssRule) => `@media (min-width: 1024px) { ${cssRule} }`,
      },
      tokens: {
        colors: {
          "red-primary": "red",
        },
        space: {
          0: "0",
          1: "1rem",
          2: "2rem",
        },
      },
    });
    
    Vue.directive("css", css);
    <template>
      <div id="app">
        <img width="25%" src="./assets/logo.png" />
        <h1 v-css:sm="'margin-1'" v-css:md="'margin-2'">By screen</h1>
        <h1 v-css="'color-red-primary'">Static</h1>
        <h1
          v-css="{
          'hover:background-color-red-primary': makeRedOnHover
        }"
        >
          Dynamic
        </h1>
      </div>
    </template>

    Install

    npm i @stitches/vue-directive

    DownloadsWeekly Downloads

    33

    Version

    9.0.0-alpha.4

    License

    MIT

    Unpacked Size

    23 kB

    Total Files

    9

    Last publish

    Collaborators

    • stephenhaney
    • hadihallak
    • colmtuite