title: Implementing Google's State Layers with Vue.js and tailwindcss?
body: <p>Google's <a href="https://m3.material.io/" rel="nofollow noreferrer">Material Design 3</a> uses a so-called <a href="https://m3.material.io/foundations/interaction-states" rel="nofollow noreferrer">state layer</a> for interaction states like hovering, focusing or pressing an element. These states are represented by adding a layer with a fixed opacity onto the element to change its colour.</p>
  <p>I am currently creating a web application with <a href="https://vuejs.org/" rel="nofollow noreferrer">Vue.js</a> and using <a href="https://tailwindcss.com/" rel="nofollow noreferrer">tailwindcss</a> as my CSS framework, and was wondering if there is a simple way of creating these state layers. As far as I am aware, there are two possibilities.</p>
  <p>I can either use a semi-transparent HTML element that has the same size, shape and position as the original element and set its colour and opacity to the required values. However, doing this for every element that can be interacted with would be a lot of work, greatly increase the size of my HTML code, and I do not think it is an elegant solution.</p>
  <p>The second way I can think of is calculating the resulting color of adding the layer to the element, and setting this value when the user interacts with it. Calculating these values manually and stating them explicitly would also be a lot of work, and it would mean that whenever I change one of the content colours, I would have to recalculate all colours for interaction. Another possibility would be to calculate the values at runtime, which has the added benefit of making them dependant on the content colours, but that would mean that I have to access the <a href="https://tailwindcss.com/docs/adding-custom-styles" rel="nofollow noreferrer">tailwind variables</a> inside my JavaScript code, and then set the corresponding classes by concatenating the tailwind class name with the calculated value.</p>
  <p>While all of these solutions would be possible, I feel like they are neither simple nor elegant. Is there another way that I did not think of, or is the concept of state layers just not meant for these frameworks?</p>