Add tailwindcss

.stylelintrc.yaml

@@ -98,7 +98,7 @@ rules:
   at-rule-allowed-list: null
   at-rule-disallowed-list: null
   at-rule-empty-line-before: null
-  at-rule-no-unknown: true
+  at-rule-no-unknown: [true, {ignoreAtRules: [tailwind]}]
   at-rule-no-vendor-prefix: true
   at-rule-property-required-list: null
   block-no-empty: true

Makefile

@@ -119,7 +119,7 @@ GO_TEST_PACKAGES ?= $(filter-out $(shell $(GO) list code.gitea.io/gitea/models/m
 FOMANTIC_WORK_DIR := web_src/fomantic
 
 WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
-WEBPACK_CONFIGS := webpack.config.js
+WEBPACK_CONFIGS := webpack.config.js tailwind.config.js
 WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css
 WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts public/assets/img/webpack
 

package.json

@@ -23,6 +23,7 @@
     "chartjs-plugin-zoom": "2.0.1",
     "clippie": "4.0.6",
     "css-loader": "6.10.0",
+    "css-variables-parser": "1.0.1",
     "dayjs": "1.11.10",
     "dropzone": "6.0.0-beta.2",
     "easymde": "2.18.0",
@@ -40,9 +41,12 @@
     "monaco-editor": "0.46.0",
     "monaco-editor-webpack-plugin": "7.1.0",
     "pdfobject": "2.3.0",
+    "postcss": "8.4.35",
+    "postcss-loader": "8.1.0",
     "pretty-ms": "9.0.0",
     "sortablejs": "1.15.2",
     "swagger-ui-dist": "5.11.6",
+    "tailwindcss": "3.4.1",
     "throttle-debounce": "5.0.0",
     "tinycolor2": "1.6.0",
     "tippy.js": "6.3.7",

tailwind.config.js

@@ -0,0 +1,39 @@
+import {readFileSync} from 'node:fs';
+import {env} from 'node:process';
+import {parse} from 'css-variables-parser';
+
+const isProduction = env.NODE_ENV !== 'development';
+
+export default {
+  prefix: 'tw-',
+  content: [
+    isProduction && '!./templates/devtest/**/*',
+    isProduction && '!./web_src/js/standalone/devtest.js',
+    './templates/**/*.tmpl',
+    './web_src/**/*.{js,vue}',
+  ].filter(Boolean),
+  blocklist: [
+    // classes that don't work without CSS variables from "@tailwind base" which we don't use
+    'transform', 'shadow', 'ring', 'blur', 'grayscale', 'invert', '!invert', 'filter', '!filter',
+    'backdrop-filter',
+    // unneeded classes
+    '[-a-zA-Z:0-9_.]',
+  ],
+  theme: {
+    colors: {
+      // make `tw-bg-red` etc work with our CSS variables
+      ...Object.fromEntries(
+        Object.keys(parse([
+          readFileSync(new URL('web_src/css/themes/theme-gitea-light.css', import.meta.url), 'utf8'),
+          readFileSync(new URL('web_src/css/themes/theme-gitea-dark.css', import.meta.url), 'utf8'),
+        ].join('\n'), {})).filter((prop) => prop.startsWith('color-')).map((prop) => {
+          const color = prop.substring(6);
+          return [color, `var(--color-${color})`];
+        })
+      ),
+      inherit: 'inherit',
+      current: 'currentcolor',
+      transparent: 'transparent',
+    },
+  },
+};

templates/devtest/gitea-ui.tmpl

@@ -275,6 +275,12 @@
 		<div>ps: no JS code attached, so just a layout</div>
 		{{template "shared/combomarkdowneditor" .}}
 	</div>
+
+	<h1>Tailwind CSS Demo</h1>
+	<div>
+		<button class="{{if true}}tw-bg-red{{end}} tw-p-5 tw-border tw-rounded hover:tw-bg-blue active:tw-bg-yellow">Button</button>
+	</div>
+
 	<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
 </div>
 {{template "base/footer" .}}

web_src/css/base.css

@@ -29,6 +29,14 @@
   --fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
 }
 
+*, ::before, ::after {
+  /* these are needed for tailwind borders to work because we do not load tailwind's base
+     https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
+  border-width: 0;
+  border-style: solid;
+  border-color: currentcolor;
+}
+
 textarea {
   font-family: var(--fonts-regular);
 }

web_src/css/index.css

@@ -59,4 +59,6 @@
 @import "./explore.css";
 @import "./review.css";
 @import "./actions.css";
+
+@tailwind utilities;
 @import "./helpers.css";

webpack.config.js

@@ -11,6 +11,8 @@ import webpack from 'webpack';
 import {fileURLToPath} from 'node:url';
 import {readFileSync} from 'node:fs';
 import {env} from 'node:process';
+import tailwindcss from 'tailwindcss';
+import tailwindConfig from './tailwind.config.js';
 
 const {EsbuildPlugin} = EsBuildLoader;
 const {SourceMapDevToolPlugin, DefinePlugin} = webpack;
@@ -145,6 +147,15 @@ export default {
               import: {filter: filterCssImport},
             },
           },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                map: false, // https://github.com/postcss/postcss/issues/1914
+                plugins: [tailwindcss(tailwindConfig)],
+              },
+            },
+          }
         ],
       },
       {