no need for variant anymore,change default DEFAULT

Author: danielstaleiny

notes.org

@@ -4,3 +4,6 @@
 
 
 * TODO Have a look on how to use org file, and then export it to markdown files, don't commit markdown, push org only.
+
+* TODO update the cheatsheet generator, and remove most of the stuff from tailwindcss config, we don't needed anymore because we use JIT.
+* TODO We also don't need to enable most of the modifiers because they are generated as needed.

src/_css/components/button.css

@@ -48,7 +48,7 @@
 }
 
 .tooltip {
-    @apply cursor-pointer relative inline-block border-b-1 border-dotted;
+    @apply cursor-pointer relative inline-block border-b border-dotted;
 
 }
 

src/_css/tailwind.config.js

@@ -193,18 +193,17 @@ module.exports = {
     },
     borderColor: (theme) => ({
       ...theme('colors'),
-      default: theme('colors.gray.300', 'currentColor'),
+      DEFAULT: theme('colors.gray.300', 'currentColor'),
     }),
     borderRadius: {
       none: '0',
       sm: '0.125rem',
-      default: '0.25rem',
+      DEFAULT: '0.25rem',
       lg: '0.5rem',
       full: '9999px',
     },
     borderWidth: {
-      default: '1px',
-      1: '1px',
+      DEFAULT: '1px',
       0: '0',
       0.125: '0.125rem',
       0.25: '0.25rem',
@@ -221,7 +220,7 @@ module.exports = {
       8: '8px',
     },
     boxShadow: {
-      default:
+      DEFAULT:
         '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
       md:
         '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
@@ -236,7 +235,7 @@ module.exports = {
     },
     cursor: {
       auto: 'auto',
-      default: 'default',
+      DEFAULT: 'default',
       pointer: 'pointer',
       wait: 'wait',
       text: 'text',
@@ -254,11 +253,11 @@ module.exports = {
     },
     flexGrow: {
       0: '0',
-      default: '1',
+      DEFAULT: '1',
     },
     flexShrink: {
       0: '0',
-      default: '1',
+      DEFAULT: '1',
     },
     fontFamily: {
       sans: [
@@ -420,72 +419,7 @@ module.exports = {
       50: '50',
     },
   },
-  variants: {
-    alignContent: ['responsive'],
-    alignItems: ['responsive'],
-    alignSelf: ['responsive'],
-    appearance: ['responsive'],
-    backgroundAttachment: ['responsive'],
-    backgroundColor: ['responsive', 'hover', 'focus'],
-    backgroundPosition: ['responsive'],
-    backgroundRepeat: ['responsive'],
-    backgroundSize: ['responsive'],
-    borderCollapse: ['responsive'],
-    borderColor: ['responsive', 'hover', 'focus'],
-    borderRadius: ['responsive'],
-    borderStyle: ['responsive'],
-    borderWidth: ['responsive'],
-    boxShadow: ['responsive', 'hover', 'focus'],
-    cursor: ['responsive'],
-    display: ['responsive'],
-    fill: ['responsive'],
-    flex: ['responsive'],
-    flexDirection: ['responsive'],
-    flexGrow: ['responsive'],
-    flexShrink: ['responsive'],
-    flexWrap: ['responsive'],
-    float: ['responsive'],
-    fontFamily: ['responsive'],
-    fontSize: ['responsive'],
-    fontSmoothing: ['responsive'],
-    fontStyle: ['responsive'],
-    fontWeight: ['responsive', 'hover', 'focus'],
-    height: ['responsive'],
-    inset: ['responsive'],
-    justifyContent: ['responsive'],
-    letterSpacing: ['responsive'],
-    lineHeight: ['responsive'],
-    listStylePosition: ['responsive'],
-    listStyleType: ['responsive'],
-    margin: ['responsive'],
-    maxHeight: ['responsive'],
-    maxWidth: ['responsive'],
-    minHeight: ['responsive'],
-    minWidth: ['responsive'],
-    objectFit: ['responsive'],
-    objectPosition: ['responsive'],
-    opacity: ['responsive'],
-    order: ['responsive'],
-    outline: ['responsive', 'focus'],
-    overflow: ['responsive'],
-    padding: ['responsive'],
-    pointerEvents: ['responsive'],
-    position: ['responsive'],
-    resize: ['responsive'],
-    stroke: ['responsive'],
-    tableLayout: ['responsive'],
-    textAlign: ['responsive'],
-    textColor: ['responsive', 'hover', 'focus'],
-    textDecoration: ['responsive', 'hover', 'focus'],
-    textTransform: ['responsive'],
-    userSelect: ['responsive'],
-    verticalAlign: ['responsive'],
-    visibility: ['responsive', 'hover', 'group-hover'],
-    whitespace: ['responsive'],
-    width: ['responsive'],
-    wordBreak: ['responsive'],
-    zIndex: ['responsive'],
-  },
+  variants: {},
   corePlugins: {},
   plugins: [],
 }