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,35 @@
+import {readFileSync} from 'node:fs';
+import {parse} from 'css-variables-parser';
+
+const colors = 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) => prop.substring(6));
+
+export default function ({isProduction}) {
+  return {
+    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',
+      // false-positives or otherwise unneeded
+      '[-a-zA-Z:0-9_.]',
+    ],
+    theme: {
+      colors: {
+        // make `tw-bg-red` etc work with our CSS variables
+        ...Object.fromEntries(colors.map((color) => [color, `var(--color-${color})`])),
+        inherit: 'inherit',
+        currentcolor: 'currentcolor',
+        transparent: 'transparent',
+      },
+    },
+  };
+};

templates/devtest/gitea-ui.tmpl

@@ -2,6 +2,10 @@
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
 <div class="page-content devtest ui container">
 	<div>
+		<h1>Tailwind</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>
 		<h1>Button</h1>
 		<div>
 			Style:

templates/repo/header.tmpl

@@ -2,7 +2,7 @@
 {{with .Repository}}
 	<div class="ui container">
 		<div class="repo-header">
-			<div class="flex-item gt-ac">
+			<div class="flex-item gt-ac tw-border">
 				<div class="flex-item-leading">{{template "repo/icon" .}}</div>
 				<div class="flex-item-main">
 					<div class="flex-item-title gt-font-18">

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({isProduction}))],
+              },
+            },
+          }
         ],
       },
       {