Tailwind README + ui preview fixes

.stylelintrc

@@ -3,6 +3,6 @@
   "rules": {
     "comment-empty-line-before": null,
     "no-descending-specificity": null,
-    "at-rule-no-unknown": [true, { "ignoreAtRules": ["include", "mixin", "extend", "content", "if", "else", "for", "each", "while", "function", "return", "warn", "error", "debug"]}]
+    "at-rule-no-unknown": [true, { "ignoreAtRules": ["include", "mixin", "extend", "content", "if", "else", "for", "each", "while", "function", "return", "warn", "error", "debug", "layer", "apply", "tailwind"]}]
   }
 }

gulp.d/lib/preview.tailwind.config.js

@@ -0,0 +1,3 @@
+const mainConfig = require('../../tailwind.config.js')
+
+module.exports = { ...mainConfig, content: ['public/**/*.{html,js}', 'src/**/*.hbs'] }

gulp.d/tasks/build.js

@@ -11,16 +11,18 @@ const ospath = require('path')
 const path = ospath.posix
 const postcss = require('gulp-postcss')
 const postcssCalc = require('postcss-calc')
-const postcssNested = require('postcss-nested')
 const postcssAdvancedVars = require('postcss-advanced-variables')
 const postcssImport = require('postcss-import')
+const tailwindcss = require('tailwindcss')
+const tailwindcssNesting = require('tailwindcss/nesting')
 const postcssUrl = require('postcss-url')
 const postcssVar = require('postcss-custom-properties')
 const { Transform } = require('stream')
 const map = (transform) => new Transform({ objectMode: true, transform })
 const through = () => map((file, enc, next) => next(null, file))
 const uglify = require('gulp-uglify')
 const vfs = require('vinyl-fs')
+const tailwindconfig = require('../lib/preview.tailwind.config')
 
 module.exports = (src, dest, preview) => () => {
   const opts = { base: src, cwd: src }
@@ -49,7 +51,9 @@ module.exports = (src, dest, preview) => () => {
         },
       },
     ]),
-    postcssNested,
+    tailwindcssNesting,
+    // only run tailwindcss in preview, datastax-docs-site repo has it's own tailwind cli step
+    preview ? tailwindcss(tailwindconfig) : () => {},
     postcssAdvancedVars,
     postcssVar({ preserve: preview }),
     // NOTE to make vars.css available to all top-level stylesheets, use the next line in place of the previous one