TailwindCSS v2.x (#1540)

components/smart/AccentModePicker.vue

@@ -2,12 +2,15 @@
   <div class="flex flex-col">
     <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
     <div>
+      <!-- text-indigo-400 -->
+      <!-- text-purple-400 -->
+      <!-- text-pink-400 -->
       <span
-        v-for="(color, index) of colors"
+        v-for="(color, index) of accentColors"
         :key="`color-${index}`"
         v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-        class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
-        :class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]"
+        class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer hover:shadow-none"
+        :class="[`text-${color}-400`, { 'bg-actColor': color === active }]"
         @click="setActiveColor(color)"
       >
         <i class="material-icons">lens</i>
@@ -21,7 +24,7 @@ export default {
   data() {
     return {
       active: localStorage.getItem("THEME_COLOR") || "green",
-      colors: ["blue", "green", "teal", "purple", "orange", "pink", "red", "yellow"],
+      accentColors: ["blue", "green", "indigo", "purple", "red", "pink", "yellow"],
     }
   },
   methods: {

components/smart/AceEditor.vue

@@ -37,7 +37,7 @@
 
 .outline {
   @apply flex;
-  @apply flex-no-wrap;
+  @apply flex-nowrap;
   @apply w-full;
   @apply overflow-auto;
   @apply font-mono;
@@ -103,7 +103,7 @@ export default {
     provideJSONOutline: {
       type: Boolean,
       default: false,
-      required: false
+      required: false,
     },
     value: {
       type: String,

components/smart/ColorModePicker.vue

@@ -16,7 +16,7 @@
         v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
         class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
         :class="[
-          { 'bg-bgDarkColor': color === $colorMode.preference },
+          { 'bg-actColor': color === $colorMode.preference },
           { 'text-acColor hover:text-acColor': color === $colorMode.value },
         ]"
         @click="$colorMode.preference = color"

components/smart/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tabs-wrapper">
+  <section class="tabs-wrapper">
     <div class="tabs" :class="styles">
       <ul>
         <li
@@ -21,20 +21,19 @@
     <div class="tabs-details">
       <slot></slot>
     </div>
-  </div>
+  </section>
 </template>
 
 <style scoped lang="scss">
 .tabs-wrapper {
   @apply flex;
   @apply flex-col;
-  @apply flex-no-wrap;
+  @apply flex-nowrap;
   @apply flex-1;
 
   .tabs {
-    @apply scrolling-touch;
     @apply flex;
-    @apply whitespace-no-wrap;
+    @apply whitespace-nowrap;
     @apply overflow-auto;
     @apply mt-4;
 
@@ -87,13 +86,15 @@
   ul,
   ol {
     @apply flex-row;
-    @apply flex-no-wrap;
+    @apply flex-nowrap;
   }
 }
 </style>
 
 <script>
+import Section from "../app/Section.vue"
 export default {
+  components: { Section },
   props: {
     styles: {
       type: String,