Packages

live_svelte

0.3.0
0.18.0 0.18.0-rc0 0.17.4 0.17.3 0.17.2 0.17.1 0.17.0 0.16.0 0.15.0 0.15.0-rc.6 0.15.0-rc.5 0.15.0-rc.4 0.15.0-rc.3 0.15.0-rc.2 0.15.0-rc.1 0.14.1 0.14.0 0.13.3 0.13.3-rc.1 0.13.2 0.13.1 0.13.0 0.12.0 0.11.0 0.10.2 0.10.1 0.10.0 0.9.0 0.9.0-rc2 0.9.0-rc1 0.9.0-rc0 0.8.0 0.7.1 0.7.0 0.6.0 0.5.1 0.5.0 0.5.0-rc0 0.4.2 0.4.2-rc0 0.4.1 0.4.1-rc0 0.4.0 0.3.5 0.3.5-rc1 0.3.5-rc0 0.3.4 0.3.3 0.3.2 0.3.1 0.3.0 0.3.0-rc1 0.3.0-rc0 0.2.0 0.2.0-rc1 0.2.0-rc0 0.1.0 0.1.0-rc5 0.1.0-rc4 0.1.0-rc3 0.1.0-rc2 0.1.0-rc1 0.1.0-rc0

E2E reactivity for Svelte and LiveView

HexDocs

Current section

Files

Jump to
Readme
63 Versions
5 Dependencies
Dependants
Files
Activity
live_svelte assets copy tailwind.config.js
Raw

assets/copy/tailwind.config.js 

// See the Tailwind configuration guide for advanced usage

// https://tailwindcss.com/docs/configuration



const plugin = require("tailwindcss/plugin")

const fs = require("fs")

const path = require("path")



module.exports = {

  content: [

    "./js/**/*.js",

    "../lib/*_web.ex",

    "../lib/*_web/**/*.*ex",

    "./svelte/**/*.svelte"

  ],

  theme: {

    extend: {

      colors: {

        brand: "#FD4F00",

      }

    },

  },

  plugins: [

    require("@tailwindcss/forms"),

    // Allows prefixing tailwind classes with LiveView classes to add rules

    // only when LiveView classes are applied, for example:

    //

    //     <div class="phx-click-loading:animate-ping">

    //

    plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),

    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),

    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),

    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),



    // Embeds Hero Icons (https://heroicons.com) into your app.css bundle

    // See your `CoreComponents.icon/1` for more information.

    //

    plugin(function({matchComponents, theme}) {

      let iconsDir = path.join(__dirname, "../priv/hero_icons/optimized")

      let values = {}

      let icons = [

        ["", "/24/outline"],

        ["-solid", "/24/solid"],

        ["-mini", "/20/solid"]

      ]

      icons.forEach(([suffix, dir]) => {

        fs.readdirSync(path.join(iconsDir, dir)).map(file => {

          let name = path.basename(file, ".svg") + suffix

          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}

        })

      })

      matchComponents({

        "hero": ({name, fullPath}) => {

          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")

          return {

            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,

            "-webkit-mask": `var(--hero-${name})`,

            "mask": `var(--hero-${name})`,

            "background-color": "currentColor",

            "vertical-align": "middle",

            "display": "inline-block",

            "width": theme("spacing.5"),

            "height": theme("spacing.5")

          }

        }

      }, {values})

    })

  ]

}