feat(dev): better support for processing tailwind css

- support use tailwind’s most features.
- support write css right next to the components.

gulpfile.js

@@ -0,0 +1,35 @@
+const gulp = require('gulp')
+const postcss = require('gulp-postcss')
+const concat = require('gulp-concat')
+const merge = require('merge-stream')
+const cleanCSS = require('gulp-clean-css')
+
+const tailwind = {
+  entryPath: './tailwind.css',
+  cssPath: './src/**/*.css',
+  outputDir: './resources/static/css/',
+  outputName: 'tailwind.min.css',
+}
+
+function buildCSS() {
+  return merge(gulp.src(tailwind.entryPath), gulp.src(tailwind.cssPath))
+    .pipe(postcss())
+    .pipe(concat(tailwind.outputName))
+    .pipe(gulp.dest(tailwind.outputDir))
+}
+
+function watchCSS() {
+  return gulp.watch([tailwind.entryPath, tailwind.cssPath], { ignoreInitial: false }, buildCSS)
+}
+
+function optimizeCSSForRelease() {
+  return gulp.src('./resources/static/css/style.css')
+    .pipe(cleanCSS())
+    .pipe(gulp.dest('./resources/static/'))
+}
+
+const releaseCSS = gulp.series(buildCSS, optimizeCSSForRelease)
+
+exports.watchCSS = watchCSS
+exports.buildCSS = buildCSS
+exports.releaseCSS = releaseCSS

package.json

@@ -6,6 +6,11 @@
         "@fullhuman/postcss-purgecss": "^2.1.2",
         "@tailwindcss/ui": "^0.1.3",
         "cssnano": "^4.1.10",
+        "gulp": "^4.0.2",
+        "gulp-clean-css": "^4.3.0",
+        "gulp-concat": "^2.6.1",
+        "gulp-postcss": "^9.0.0",
+        "merge-stream": "^2.0.0",
         "postcss": "^7.0.21",
         "postcss-cli": "^6.1.3",
         "purgecss": "^2.1.0",
@@ -13,6 +18,8 @@
         "tailwindcss": "^1.3.4"
     },
     "scripts": {
+        "watch:css": "gulp watchCSS",
+        "release:css": "NODE_ENV=production gulp releaseCSS",
         "watch": "clojure -A:cljs watch app publishing",
         "release": "clojure -A:cljs release app publishing",
         "watch-app": "clojure -A:cljs watch app",

postcss.config.js

@@ -9,7 +9,8 @@ module.exports = (ctx) => ({
           '../resources/static/js/main.js',
           // etc.
         ],
-        // https://tailwindcss.com/docs/controlling-file-size#setting-up-purgecss
+
+        // https://tailwindcss.com/docs/controlling-file-size#understanding-the-regex
         // without this we miss keeping eg. `w-1/2`
         defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
       })

shadow-cljs.edn

@@ -18,11 +18,6 @@
                       :output-feature-set :es6
                       :externs ["datascript/externs.js"
                                 "externs.js"]}
-   ;; TODO: purge-css not working properly
-   ;; :build-hooks [(shadow.hooks/purge-css
-   ;;                {:css-source "node_modules/@tailwindcss/ui/dist/tailwind-ui.min.css"
-   ;;                 :js-globs   ["resources/static/js/*.js"]
-   ;;                 :public-dir    "resources/static/css"})]
    :devtools
    ;; before live-reloading any code call this function
    {:before-load frontend.core/stop

styles.src.css

@@ -1,8 +0,0 @@
-@tailwind base;
-@tailwind components;
-
-.green-example {
-    @apply text-green-700 bg-green-200;
-}
-
-@tailwind utilities;

tailwind.config.js

@@ -1,6 +1,4 @@
 module.exports = {
-  theme: {
-    extend: {},
-  },
+  purge: false,
   plugins: [require("@tailwindcss/ui")],
 };

tailwind.css

@@ -1,6 +1,3 @@
-@charset "utf-8";
-/* purgecss start ignore */
-@tailwind  base;
-@tailwind  components;
-/* purgecss end ignore */
-@tailwind  utilities;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;