summaryrefslogtreecommitdiffstats
path: root/tailwind.config.js
Commit message (Collapse)AuthorAgeFilesLines
* Migrate font-family to tailwind (#30118)silverwind2024-03-281-0/+4
| | | | | | | | | | | Enable us to use tailwind's [`font-family`](https://tailwindcss.com/docs/font-family) classes as well as remove `gt-mono` in favor of `tw-font-mono`. I also merged the "compensation" to one selector, previously this was two different values 0.9em and 0.95em. I did not declare a `serif` font because I don't think there will ever be a use case for those. Command ran: ```sh perl -p -i -e 's#gt-mono#tw-font-mono#g' web_src/js/**/* templates/**/*
* Migrate `gt-hidden` to `tw-hidden` (#30046)silverwind2024-03-241-0/+2
| | | | | | | | | | | | We have to define this one in helpers.css because tailwind only generates a single class but certain things rely on this being double-class. Command ran: ```sh perl -p -i -e 's#gt-hidden#tw-hidden#g' web_src/js/**/* templates/**/* models/**/* web_src/css/**/* --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Migrate font-size helpers to tailwind (#30029)silverwind2024-03-231-0/+18
| | | | | | | | | | Migrate `gt-font-*` to `tw-text-*` All tailwind-original class names are also available and render like they would with 16px root font size. We currently have root font size at 14px, but I would like to eventually migrate us to 16px so that the tailwind docs apply to us unchangend and because 16px is the recommended root font size for web pages in general. Also the number 16 is much better dividable than 14 so will result in more integers.
* Migrate font-weight helpers to tailwind (#30027)silverwind2024-03-231-0/+7
| | | | | | | | | | | Commands ran: ```sh perl -p -i -e 's#gt-font-light#tw-font-light#g' web_src/js/**/* templates/**/* perl -p -i -e 's#gt-font-normal#tw-font-normal#g' web_src/js/**/* templates/**/* perl -p -i -e 's#gt-font-medium#tw-font-medium#g' web_src/js/**/* templates/**/* perl -p -i -e 's#gt-font-semibold#tw-font-semibold#g' web_src/js/**/* templates/**/* perl -p -i -e 's#gt-font-bold#tw-font-bold#g' web_src/js/**/* templates/**/* ```
* Migrate border and margin classes to Tailwind (#29828)silverwind2024-03-181-0/+11
| | | | | | | Used all existing css vars, other migrations are 1:1. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Include go files in tailwind processing (#29686)silverwind2024-03-091-0/+3
| | | | | | | | | | | | | We need to scan `.go` files for tailwind classes. Does not seem to affect build time much luckily. Fixes: https://github.com/go-gitea/gitea/pull/29678#discussion_r1518448600 Verified via `rg tw-object-contain public/assets/css/index.css`. --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Adjust tailwind content globs (#29596)silverwind2024-03-051-1/+3
| | | | | | | | | | Tailwind content is not going to appear in `web_src/css`, `web_src/fomantic` or `web_src/svg` or the JSON templates, so we don't need to have tailwind scan these directories which will speed up the build. --------- Co-authored-by: delvh <dev.lh@web.de>
* Inline the `css-variables-parser` dependency (#29571)silverwind2024-03-041-10/+24
| | | Get rid of the `postcss@7` dependency by inlining this simple function.
* Apply tailwindcss rules with `!important` (#29437)silverwind2024-02-271-0/+1
| | | | | | | | | | As per discussion in https://github.com/go-gitea/gitea/pull/29423, I think this is the right way that does not burden developers having to think about CSS precedence which should be irrelevant with an atomic CSS framework. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Add tailwindcss (#29357)silverwind2024-02-251-0/+39
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>