mirror of
https://github.com/go-gitea/gitea
synced 2024-11-12 13:14:24 +00:00
f4b92578b4
This will get tailwindcss working on a basic level. It provides only the
utility classes, e.g. no tailwind base which we don't need because we
have our own CSS reset. Without the base, we also do not have their CSS
variables so a small amount of features do not work and I removed the
generated classes for them.
***Note for future developers: This currently uses a `tw-` prefix, so we
use it like `tw-p-3`.***
<details>
<summary>Currently added CSS, all false-positives</summary>
```
.\!visible{
visibility: visible !important
}
.visible{
visibility: visible
}
.invisible{
visibility: hidden
}
.collapse{
visibility: collapse
}
.static{
position: static
}
.\!fixed{
position: fixed !important
}
.absolute{
position: absolute
}
.relative{
position: relative
}
.sticky{
position: sticky
}
.left-10{
left: 2.5rem
}
.isolate{
isolation: isolate
}
.float-right{
float: right
}
.float-left{
float: left
}
.mr-2{
margin-right: 0.5rem
}
.mr-3{
margin-right: 0.75rem
}
.\!block{
display: block !important
}
.block{
display: block
}
.inline-block{
display: inline-block
}
.inline{
display: inline
}
.flex{
display: flex
}
.inline-flex{
display: inline-flex
}
.\!table{
display: table !important
}
.inline-table{
display: inline-table
}
.table-caption{
display: table-caption
}
.table-cell{
display: table-cell
}
.table-column{
display: table-column
}
.table-column-group{
display: table-column-group
}
.table-footer-group{
display: table-footer-group
}
.table-header-group{
display: table-header-group
}
.table-row-group{
display: table-row-group
}
.table-row{
display: table-row
}
.flow-root{
display: flow-root
}
.inline-grid{
display: inline-grid
}
.contents{
display: contents
}
.list-item{
display: list-item
}
.\!hidden{
display: none !important
}
.hidden{
display: none
}
.flex-shrink{
flex-shrink: 1
}
.shrink{
flex-shrink: 1
}
.flex-grow{
flex-grow: 1
}
.grow{
flex-grow: 1
}
.border-collapse{
border-collapse: collapse
}
.select-all{
user-select: all
}
.resize{
resize: both
}
.flex-wrap{
flex-wrap: wrap
}
.overflow-visible{
overflow: visible
}
.rounded{
border-radius: 0.25rem
}
.border{
border-width: 1px
}
.text-justify{
text-align: justify
}
.uppercase{
text-transform: uppercase
}
.lowercase{
text-transform: lowercase
}
.capitalize{
text-transform: capitalize
}
.italic{
font-style: italic
}
.text-red{
color: var(--color-red)
}
.text-shadow{
color: var(--color-shadow)
}
.underline{
text-decoration-line: underline
}
.overline{
text-decoration-line: overline
}
.line-through{
text-decoration-line: line-through
}
.outline{
outline-style: solid
}
.ease-in{
transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
}
.ease-in-out{
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.ease-out{
transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}
```
</details>
---------
Co-authored-by: Giteabot <teabot@gitea.io>
40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
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',
|
|
},
|
|
},
|
|
};
|