How to write nested css with tailwind in nuxt.js?

@raphael_tillman 

To write nested CSS with Tailwind in Nuxt.js, you can use the @apply directive provided by Tailwind CSS. Here's an example of how you can write nested CSS with Tailwind in Nuxt.js:

1. Create a new component file in the components directory of your Nuxt.js project (e.g., NestedComponent.vue)
2. In the template section of the component file, add the HTML structure for the nested elements:

1
2
3
4
5
6
7

<template>
  <div class="outer">
    <div class="inner">
      Nested CSS with Tailwind
    </div>
  </div>
</template>

1. In the

1
2
3
4
5
6
7
8
9

<style scoped>
.outer {
  @apply bg-gray-200 p-4;

  .inner {
    @apply bg-gray-300 p-2 text-center;
  }
}
</style>

1. Import the component in a parent component file and use it as needed:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<template>
  <div>
    <NestedComponent />
  </div>
</template>

<script>
import NestedComponent from '~/components/NestedComponent.vue'

export default {
  components: {
    NestedComponent
  }
}
</script>

With this setup, you can style nested elements using Tailwind utility classes in Nuxt.js by leveraging the @apply directive to create nested CSS styles within a component file.