├── .github └── workflows │ └── ci.yml ├── .gitignore ├── .npmrc ├── .prettierignore ├── LICENSE ├── README.md ├── jest.config.js ├── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── src └── main.ts ├── tailwind.config.cjs ├── test ├── __snapshots__ │ ├── integration.test.ts.snap │ └── response.test.ts.snap ├── fixtures │ ├── remix-app │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── app │ │ │ ├── entry.client.tsx │ │ │ ├── entry.server.tsx │ │ │ ├── root.tsx │ │ │ ├── routes │ │ │ │ ├── index.tsx │ │ │ │ ├── tailwindcss-custom.tsx │ │ │ │ └── tailwindcss-default.tsx │ │ │ └── tailwind.css │ │ ├── package.json │ │ ├── public │ │ │ └── favicon.ico │ │ ├── remix.config.js │ │ ├── remix.env.d.ts │ │ ├── tailwind.config.js │ │ └── tsconfig.json │ └── tailwind.css ├── integration.test.ts └── response.test.ts └── tsconfig.json /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | workflow_dispatch: 9 | 10 | jobs: 11 | test: 12 | strategy: 13 | matrix: 14 | os: [ubuntu-latest, windows-latest, macos-latest] 15 | node-version: [16.x, 17.x] 16 | fail-fast: false 17 | name: test - ${{ matrix.os }} - node ${{ matrix.node-version }} 18 | runs-on: ${{ matrix.os }} 19 | steps: 20 | - uses: actions/checkout@v2 21 | - uses: actions/setup-node@v2 22 | with: 23 | # https://github.com/actions/setup-node#supported-version-syntax 24 | node-version: ${{ matrix.node-version }} 25 | - run: npm i -g pnpm 26 | - run: pnpm install --frozen-lockfile 27 | - run: pnpm test 28 | lint: 29 | name: lint 30 | runs-on: ubuntu-latest 31 | steps: 32 | - uses: actions/checkout@v2 33 | - uses: actions/setup-node@v2 34 | with: 35 | # https://github.com/actions/setup-node#supported-version-syntax 36 | node-version: "lts/*" 37 | - run: npm i -g pnpm 38 | - run: pnpm install --frozen-lockfile 39 | - run: pnpm lint 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .vscode 4 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # remix relies on packages that aren't explicitly declared as deps, 2 | # so we need this flag to make _all_ packages available 3 | shamefully-hoist = true 4 | 5 | # this project is sort of a "workspace-lite", 6 | # so I don't think this protection is necessary 7 | ignore-workspace-root-check = true 8 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | pnpm-lock.yaml 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 itsMapleLeaf 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Deprecated! 2 | 3 | Remix has supported TailwindCSS built-in for a while now. Don't use this. 4 | 5 | - Remix Vite: https://remix.run/docs/en/main/future/vite#enable-tailwind-via-postcss 6 | - Classic compiler: https://remix.run/docs/en/main/styling/tailwind#tailwind 7 | 8 | # remix-tailwind 9 | 10 | Use [TailwindCSS](https://tailwindcss.com) with [Remix](https://remix.run) without an extra build step! 11 | 12 | ## Install 13 | 14 | ```sh 15 | # npm 16 | npm install remix-tailwind tailwindcss postcss 17 | 18 | # pnpm 19 | pnpm install remix-tailwind tailwindcss postcss 20 | 21 | # yarn 22 | yarn add remix-tailwind tailwindcss postcss 23 | ``` 24 | 25 | ## Usage 26 | 27 | 1. Generate a tailwind config: 28 | 29 | ```sh 30 | npx tailwindcss init 31 | ``` 32 | 33 | 1. Create a file at `app/routes/tailwindcss.tsx` or `app/routes/tailwindcss.js`: 34 | 35 | ```ts 36 | import type { LoaderFunction } from "remix" 37 | import { serveTailwindCss } from "remix-tailwind" 38 | 39 | export const loader: LoaderFunction = () => serveTailwindCss() 40 | ``` 41 | 42 | 1. Add a link to this route in `app/root.tsx`: 43 | 44 | ```js 45 | export const links: LinksFunction = () => { 46 | return [{ rel: "stylesheet", href: "/tailwindcss" }] 47 | } 48 | ``` 49 | 50 | And that's it! Get styling. 🖌 51 | 52 | ## Custom CSS file 53 | 54 | remix-tailwind uses a default CSS file, but you can provide a path to your own. The path can be absolute, or relative to the current working directory. 55 | 56 | ```ts 57 | // app/routes/tailwindcss.tsx 58 | import type { LoaderFunction } from "remix" 59 | import { serveTailwindCss } from "remix-tailwind" 60 | 61 | export const loader: LoaderFunction = () => serveTailwindCss("app/tailwind.css") 62 | ``` 63 | 64 | ```css 65 | /* app/tailwind.css */ 66 | @tailwind base; 67 | @tailwind components; 68 | @tailwind utilities; 69 | 70 | html, 71 | body { 72 | @apply bg-slate-900 text-slate-100; 73 | } 74 | ``` 75 | 76 | ## How it works 77 | 78 | - Reads your CSS and config when requesting the route 79 | - Processes tailwind CSS via PostCSS and returns it as a response 80 | - Remix takes that CSS and applies it to the page (via a link tag, that ol' thing) 81 | 82 | In production, the CSS is only built once, and cached on every following request. This is _probably_ fine, but you could consider prebuilding the CSS yourself if you like. 83 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('@jest/types').Config.InitialOptions} */ 2 | const config = { 3 | // transform typescript files with esbuild-jest 4 | transform: { 5 | "^.+\\.tsx?$": ["esbuild-jest", { format: "esm" }], 6 | }, 7 | 8 | // treat ts as es modules 9 | extensionsToTreatAsEsm: [".ts"], 10 | 11 | // ignore fixtures in watch mode 12 | watchPathIgnorePatterns: [ 13 | "/test/fixtures/.*", 14 | "/test/__snapshots__/.*", 15 | ], 16 | } 17 | // eslint-disable-next-line import/no-unused-modules 18 | export default config 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "remix-tailwind", 3 | "version": "0.3.0", 4 | "description": "Use TailwindCSS with Remix without an extra build step!", 5 | "author": "itsMapleLeaf", 6 | "license": "MIT", 7 | "type": "module", 8 | "types": "dist/main.d.ts", 9 | "files": [ 10 | "dist" 11 | ], 12 | "exports": { 13 | ".": { 14 | "import": "./dist/main.js", 15 | "require": "./dist/main.cjs" 16 | } 17 | }, 18 | "scripts": { 19 | "build": "tsup-node src/main.ts --clean --target node16 --format cjs,esm --dts", 20 | "test": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" jest --verbose --forceExit", 21 | "release": "release-it", 22 | "prepublishOnly": "pnpm lint && pnpm test", 23 | "lint": "eslint --ext js,ts,tsx .", 24 | "lint-fix": "pnpm lint -- --fix", 25 | "format": "prettier --write .", 26 | "typecheck": "tsc --noEmit" 27 | }, 28 | "dependencies": { 29 | "@remix-run/node": "^1.1.1", 30 | "@types/tailwindcss": "^2.2.4", 31 | "postcss-load-config": "^3.1.4" 32 | }, 33 | "peerDependencies": { 34 | "postcss": ">=8", 35 | "tailwindcss": ">=2" 36 | }, 37 | "devDependencies": { 38 | "@itsmapleleaf/configs": "^1.1.2", 39 | "@jest/types": "^27.4.2", 40 | "@types/jest": "^27.0.3", 41 | "@types/node": "^17.0.1", 42 | "@typescript-eslint/eslint-plugin": "^5.7.0", 43 | "@typescript-eslint/parser": "^5.7.0", 44 | "cross-env": "^7.0.3", 45 | "esbuild": "^0.14.5", 46 | "esbuild-jest": "^0.5.0", 47 | "eslint": "^8.5.0", 48 | "eslint-config-prettier": "^8.3.0", 49 | "eslint-import-resolver-typescript": "^2.5.0", 50 | "eslint-plugin-import": "^2.25.3", 51 | "eslint-plugin-jsx-a11y": "^6.5.1", 52 | "eslint-plugin-react": "^7.27.1", 53 | "eslint-plugin-react-hooks": "^4.3.0", 54 | "eslint-plugin-unicorn": "^39.0.0", 55 | "execa": "^6.0.0", 56 | "jest": "^27.4.5", 57 | "postcss": "^8.4.5", 58 | "prettier": "^2.5.1", 59 | "release-it": "^14.11.8", 60 | "tailwindcss": "^3.0.7", 61 | "tsup": "^5.11.6", 62 | "typescript": "^4.5.4" 63 | }, 64 | "tsup": { 65 | "target": "node16", 66 | "entryPoints": [ 67 | "src/main.ts" 68 | ], 69 | "format": [ 70 | "cjs", 71 | "esm" 72 | ], 73 | "dts": true 74 | }, 75 | "prettier": "@itsmapleleaf/configs/prettier", 76 | "eslintConfig": { 77 | "extends": [ 78 | "./node_modules/@itsmapleleaf/configs/eslint" 79 | ], 80 | "ignorePatterns": [ 81 | "**/test/fixtures/**", 82 | "**/node_modules/**", 83 | "**/dist/**" 84 | ] 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | workspaces: 2 | - test/fixtures/remix-app 3 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | // remix can't handle node: imports yet 2 | /* eslint-disable unicorn/prefer-node-protocol */ 3 | import { Response } from "@remix-run/node" 4 | import { readFile } from "fs/promises" 5 | import path from "path" 6 | import type { Postcss, Processor } from "postcss" 7 | import postcss from "postcss" 8 | import postcssrc from "postcss-load-config" 9 | import tailwindcss from "tailwindcss" 10 | 11 | const defaultInputCss = ` 12 | @tailwind base; 13 | @tailwind components; 14 | @tailwind utilities; 15 | ` 16 | 17 | const cache = new Map() 18 | const defaultCacheKey = Symbol("remix-tailwind-default") 19 | 20 | export async function serveTailwindCss(cssFilePath?: string) { 21 | const cacheKey = cssFilePath ? toAbsolutePath(cssFilePath) : defaultCacheKey 22 | const cachedResponse = cache.get(cacheKey) 23 | if (process.env.NODE_ENV === "production" && cachedResponse) { 24 | return cssResponse(cachedResponse) 25 | } 26 | 27 | let plugins: Parameters = [tailwindcss] 28 | let options: Parameters["1"] = { 29 | from: cssFilePath, 30 | } 31 | 32 | try { 33 | const postcssConfig = await postcssrc() 34 | plugins = postcssConfig.plugins 35 | options = postcssConfig.options 36 | options.from = cssFilePath || options.from 37 | } catch { 38 | // just use the default ones 39 | } 40 | 41 | const inputCss = options.from 42 | ? await readFile(options.from, "utf-8") 43 | : defaultInputCss 44 | 45 | const { css } = await postcss(plugins).process(inputCss, options) 46 | 47 | if (process.env.NODE_ENV === "production") { 48 | cache.set(cacheKey, css) 49 | } 50 | 51 | return cssResponse(css) 52 | } 53 | 54 | function cssResponse(css: string): Response { 55 | return new Response(css, { 56 | headers: { "content-type": "text/css" }, 57 | }) 58 | } 59 | 60 | function toAbsolutePath(inputPath: string): string { 61 | if (path.isAbsolute(inputPath)) { 62 | return inputPath 63 | } 64 | return path.join(process.cwd(), inputPath) 65 | } 66 | 67 | /** 68 | * @deprecated The createLoader api has potential pitfalls and is not recommended. Use `serveTailwindCss` instead: 69 | * ```ts 70 | * import type { LoaderFunction } from "remix" 71 | * import { serveTailwindCss } from "remix-tailwind" 72 | * 73 | * export const loader: LoaderFunction = () => serveTailwindCss() 74 | * ``` 75 | */ 76 | // eslint-disable-next-line import/no-unused-modules 77 | export function createLoader(cssFilePath?: string) { 78 | return () => serveTailwindCss(cssFilePath) 79 | } 80 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | } 8 | -------------------------------------------------------------------------------- /test/__snapshots__/integration.test.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`integration 1`] = ` 4 | "/* 5 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 6 | *//* 7 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 8 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 9 | */ 10 | 11 | *, 12 | ::before, 13 | ::after { 14 | box-sizing: border-box; /* 1 */ 15 | border-width: 0; /* 2 */ 16 | border-style: solid; /* 2 */ 17 | border-color: currentColor; /* 2 */ 18 | } 19 | 20 | ::before, 21 | ::after { 22 | --tw-content: ''; 23 | } 24 | 25 | /* 26 | 1. Use a consistent sensible line-height in all browsers. 27 | 2. Prevent adjustments of font size after orientation changes in iOS. 28 | 3. Use a more readable tab size. 29 | 4. Use the user's configured \`sans\` font-family by default. 30 | */ 31 | 32 | html { 33 | line-height: 1.5; /* 1 */ 34 | -webkit-text-size-adjust: 100%; /* 2 */ 35 | -moz-tab-size: 4; /* 3 */ 36 | tab-size: 4; /* 3 */ 37 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 38 | } 39 | 40 | /* 41 | 1. Remove the margin in all browsers. 42 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 43 | */ 44 | 45 | body { 46 | margin: 0; /* 1 */ 47 | line-height: inherit; /* 2 */ 48 | } 49 | 50 | /* 51 | 1. Add the correct height in Firefox. 52 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 53 | 3. Ensure horizontal rules are visible by default. 54 | */ 55 | 56 | hr { 57 | height: 0; /* 1 */ 58 | color: inherit; /* 2 */ 59 | border-top-width: 1px; /* 3 */ 60 | } 61 | 62 | /* 63 | Add the correct text decoration in Chrome, Edge, and Safari. 64 | */ 65 | 66 | abbr[title] { 67 | text-decoration: underline dotted; 68 | } 69 | 70 | /* 71 | Remove the default font size and weight for headings. 72 | */ 73 | 74 | h1, 75 | h2, 76 | h3, 77 | h4, 78 | h5, 79 | h6 { 80 | font-size: inherit; 81 | font-weight: inherit; 82 | } 83 | 84 | /* 85 | Reset links to optimize for opt-in styling instead of opt-out. 86 | */ 87 | 88 | a { 89 | color: inherit; 90 | text-decoration: inherit; 91 | } 92 | 93 | /* 94 | Add the correct font weight in Edge and Safari. 95 | */ 96 | 97 | b, 98 | strong { 99 | font-weight: bolder; 100 | } 101 | 102 | /* 103 | 1. Use the user's configured \`mono\` font family by default. 104 | 2. Correct the odd \`em\` font sizing in all browsers. 105 | */ 106 | 107 | code, 108 | kbd, 109 | samp, 110 | pre { 111 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 112 | font-size: 1em; /* 2 */ 113 | } 114 | 115 | /* 116 | Add the correct font size in all browsers. 117 | */ 118 | 119 | small { 120 | font-size: 80%; 121 | } 122 | 123 | /* 124 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 125 | */ 126 | 127 | sub, 128 | sup { 129 | font-size: 75%; 130 | line-height: 0; 131 | position: relative; 132 | vertical-align: baseline; 133 | } 134 | 135 | sub { 136 | bottom: -0.25em; 137 | } 138 | 139 | sup { 140 | top: -0.5em; 141 | } 142 | 143 | /* 144 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 145 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 146 | 3. Remove gaps between table borders by default. 147 | */ 148 | 149 | table { 150 | text-indent: 0; /* 1 */ 151 | border-color: inherit; /* 2 */ 152 | border-collapse: collapse; /* 3 */ 153 | } 154 | 155 | /* 156 | 1. Change the font styles in all browsers. 157 | 2. Remove the margin in Firefox and Safari. 158 | 3. Remove default padding in all browsers. 159 | */ 160 | 161 | button, 162 | input, 163 | optgroup, 164 | select, 165 | textarea { 166 | font-family: inherit; /* 1 */ 167 | font-size: 100%; /* 1 */ 168 | line-height: inherit; /* 1 */ 169 | color: inherit; /* 1 */ 170 | margin: 0; /* 2 */ 171 | padding: 0; /* 3 */ 172 | } 173 | 174 | /* 175 | Remove the inheritance of text transform in Edge and Firefox. 176 | */ 177 | 178 | button, 179 | select { 180 | text-transform: none; 181 | } 182 | 183 | /* 184 | 1. Correct the inability to style clickable types in iOS and Safari. 185 | 2. Remove default button styles. 186 | */ 187 | 188 | button, 189 | [type='button'], 190 | [type='reset'], 191 | [type='submit'] { 192 | -webkit-appearance: button; /* 1 */ 193 | background-color: transparent; /* 2 */ 194 | background-image: none; /* 2 */ 195 | } 196 | 197 | /* 198 | Use the modern Firefox focus style for all focusable elements. 199 | */ 200 | 201 | :-moz-focusring { 202 | outline: auto; 203 | } 204 | 205 | /* 206 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 207 | */ 208 | 209 | :-moz-ui-invalid { 210 | box-shadow: none; 211 | } 212 | 213 | /* 214 | Add the correct vertical alignment in Chrome and Firefox. 215 | */ 216 | 217 | progress { 218 | vertical-align: baseline; 219 | } 220 | 221 | /* 222 | Correct the cursor style of increment and decrement buttons in Safari. 223 | */ 224 | 225 | ::-webkit-inner-spin-button, 226 | ::-webkit-outer-spin-button { 227 | height: auto; 228 | } 229 | 230 | /* 231 | 1. Correct the odd appearance in Chrome and Safari. 232 | 2. Correct the outline style in Safari. 233 | */ 234 | 235 | [type='search'] { 236 | -webkit-appearance: textfield; /* 1 */ 237 | outline-offset: -2px; /* 2 */ 238 | } 239 | 240 | /* 241 | Remove the inner padding in Chrome and Safari on macOS. 242 | */ 243 | 244 | ::-webkit-search-decoration { 245 | -webkit-appearance: none; 246 | } 247 | 248 | /* 249 | 1. Correct the inability to style clickable types in iOS and Safari. 250 | 2. Change font properties to \`inherit\` in Safari. 251 | */ 252 | 253 | ::-webkit-file-upload-button { 254 | -webkit-appearance: button; /* 1 */ 255 | font: inherit; /* 2 */ 256 | } 257 | 258 | /* 259 | Add the correct display in Chrome and Safari. 260 | */ 261 | 262 | summary { 263 | display: list-item; 264 | } 265 | 266 | /* 267 | Removes the default spacing and border for appropriate elements. 268 | */ 269 | 270 | blockquote, 271 | dl, 272 | dd, 273 | h1, 274 | h2, 275 | h3, 276 | h4, 277 | h5, 278 | h6, 279 | hr, 280 | figure, 281 | p, 282 | pre { 283 | margin: 0; 284 | } 285 | 286 | fieldset { 287 | margin: 0; 288 | padding: 0; 289 | } 290 | 291 | legend { 292 | padding: 0; 293 | } 294 | 295 | ol, 296 | ul, 297 | menu { 298 | list-style: none; 299 | margin: 0; 300 | padding: 0; 301 | } 302 | 303 | /* 304 | Prevent resizing textareas horizontally by default. 305 | */ 306 | 307 | textarea { 308 | resize: vertical; 309 | } 310 | 311 | /* 312 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 313 | 2. Set the default placeholder color to the user's configured gray 400 color. 314 | */ 315 | 316 | input::placeholder, 317 | textarea::placeholder { 318 | opacity: 1; /* 1 */ 319 | color: #9ca3af; /* 2 */ 320 | } 321 | 322 | /* 323 | Set the default cursor for buttons. 324 | */ 325 | 326 | button, 327 | [role=\\"button\\"] { 328 | cursor: pointer; 329 | } 330 | 331 | /* 332 | Make sure disabled buttons don't get the pointer cursor. 333 | */ 334 | :disabled { 335 | cursor: default; 336 | } 337 | 338 | /* 339 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 340 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 341 | This can trigger a poorly considered lint error in some tools but is included by design. 342 | */ 343 | 344 | img, 345 | svg, 346 | video, 347 | canvas, 348 | audio, 349 | iframe, 350 | embed, 351 | object { 352 | display: block; /* 1 */ 353 | vertical-align: middle; /* 2 */ 354 | } 355 | 356 | /* 357 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 358 | */ 359 | 360 | img, 361 | video { 362 | max-width: 100%; 363 | height: auto; 364 | } 365 | 366 | /* 367 | Ensure the default browser behavior of the \`hidden\` attribute. 368 | */ 369 | 370 | [hidden] { 371 | display: none; 372 | } 373 | " 374 | `; 375 | 376 | exports[`integration 2`] = ` 377 | "/* 378 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 379 | *//* 380 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 381 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 382 | */ 383 | 384 | *, 385 | ::before, 386 | ::after { 387 | box-sizing: border-box; /* 1 */ 388 | border-width: 0; /* 2 */ 389 | border-style: solid; /* 2 */ 390 | border-color: currentColor; /* 2 */ 391 | } 392 | 393 | ::before, 394 | ::after { 395 | --tw-content: ''; 396 | } 397 | 398 | /* 399 | 1. Use a consistent sensible line-height in all browsers. 400 | 2. Prevent adjustments of font size after orientation changes in iOS. 401 | 3. Use a more readable tab size. 402 | 4. Use the user's configured \`sans\` font-family by default. 403 | */ 404 | 405 | html { 406 | line-height: 1.5; /* 1 */ 407 | -webkit-text-size-adjust: 100%; /* 2 */ 408 | -moz-tab-size: 4; /* 3 */ 409 | tab-size: 4; /* 3 */ 410 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 411 | } 412 | 413 | /* 414 | 1. Remove the margin in all browsers. 415 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 416 | */ 417 | 418 | body { 419 | margin: 0; /* 1 */ 420 | line-height: inherit; /* 2 */ 421 | } 422 | 423 | /* 424 | 1. Add the correct height in Firefox. 425 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 426 | 3. Ensure horizontal rules are visible by default. 427 | */ 428 | 429 | hr { 430 | height: 0; /* 1 */ 431 | color: inherit; /* 2 */ 432 | border-top-width: 1px; /* 3 */ 433 | } 434 | 435 | /* 436 | Add the correct text decoration in Chrome, Edge, and Safari. 437 | */ 438 | 439 | abbr[title] { 440 | text-decoration: underline dotted; 441 | } 442 | 443 | /* 444 | Remove the default font size and weight for headings. 445 | */ 446 | 447 | h1, 448 | h2, 449 | h3, 450 | h4, 451 | h5, 452 | h6 { 453 | font-size: inherit; 454 | font-weight: inherit; 455 | } 456 | 457 | /* 458 | Reset links to optimize for opt-in styling instead of opt-out. 459 | */ 460 | 461 | a { 462 | color: inherit; 463 | text-decoration: inherit; 464 | } 465 | 466 | /* 467 | Add the correct font weight in Edge and Safari. 468 | */ 469 | 470 | b, 471 | strong { 472 | font-weight: bolder; 473 | } 474 | 475 | /* 476 | 1. Use the user's configured \`mono\` font family by default. 477 | 2. Correct the odd \`em\` font sizing in all browsers. 478 | */ 479 | 480 | code, 481 | kbd, 482 | samp, 483 | pre { 484 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 485 | font-size: 1em; /* 2 */ 486 | } 487 | 488 | /* 489 | Add the correct font size in all browsers. 490 | */ 491 | 492 | small { 493 | font-size: 80%; 494 | } 495 | 496 | /* 497 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 498 | */ 499 | 500 | sub, 501 | sup { 502 | font-size: 75%; 503 | line-height: 0; 504 | position: relative; 505 | vertical-align: baseline; 506 | } 507 | 508 | sub { 509 | bottom: -0.25em; 510 | } 511 | 512 | sup { 513 | top: -0.5em; 514 | } 515 | 516 | /* 517 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 518 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 519 | 3. Remove gaps between table borders by default. 520 | */ 521 | 522 | table { 523 | text-indent: 0; /* 1 */ 524 | border-color: inherit; /* 2 */ 525 | border-collapse: collapse; /* 3 */ 526 | } 527 | 528 | /* 529 | 1. Change the font styles in all browsers. 530 | 2. Remove the margin in Firefox and Safari. 531 | 3. Remove default padding in all browsers. 532 | */ 533 | 534 | button, 535 | input, 536 | optgroup, 537 | select, 538 | textarea { 539 | font-family: inherit; /* 1 */ 540 | font-size: 100%; /* 1 */ 541 | line-height: inherit; /* 1 */ 542 | color: inherit; /* 1 */ 543 | margin: 0; /* 2 */ 544 | padding: 0; /* 3 */ 545 | } 546 | 547 | /* 548 | Remove the inheritance of text transform in Edge and Firefox. 549 | */ 550 | 551 | button, 552 | select { 553 | text-transform: none; 554 | } 555 | 556 | /* 557 | 1. Correct the inability to style clickable types in iOS and Safari. 558 | 2. Remove default button styles. 559 | */ 560 | 561 | button, 562 | [type='button'], 563 | [type='reset'], 564 | [type='submit'] { 565 | -webkit-appearance: button; /* 1 */ 566 | background-color: transparent; /* 2 */ 567 | background-image: none; /* 2 */ 568 | } 569 | 570 | /* 571 | Use the modern Firefox focus style for all focusable elements. 572 | */ 573 | 574 | :-moz-focusring { 575 | outline: auto; 576 | } 577 | 578 | /* 579 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 580 | */ 581 | 582 | :-moz-ui-invalid { 583 | box-shadow: none; 584 | } 585 | 586 | /* 587 | Add the correct vertical alignment in Chrome and Firefox. 588 | */ 589 | 590 | progress { 591 | vertical-align: baseline; 592 | } 593 | 594 | /* 595 | Correct the cursor style of increment and decrement buttons in Safari. 596 | */ 597 | 598 | ::-webkit-inner-spin-button, 599 | ::-webkit-outer-spin-button { 600 | height: auto; 601 | } 602 | 603 | /* 604 | 1. Correct the odd appearance in Chrome and Safari. 605 | 2. Correct the outline style in Safari. 606 | */ 607 | 608 | [type='search'] { 609 | -webkit-appearance: textfield; /* 1 */ 610 | outline-offset: -2px; /* 2 */ 611 | } 612 | 613 | /* 614 | Remove the inner padding in Chrome and Safari on macOS. 615 | */ 616 | 617 | ::-webkit-search-decoration { 618 | -webkit-appearance: none; 619 | } 620 | 621 | /* 622 | 1. Correct the inability to style clickable types in iOS and Safari. 623 | 2. Change font properties to \`inherit\` in Safari. 624 | */ 625 | 626 | ::-webkit-file-upload-button { 627 | -webkit-appearance: button; /* 1 */ 628 | font: inherit; /* 2 */ 629 | } 630 | 631 | /* 632 | Add the correct display in Chrome and Safari. 633 | */ 634 | 635 | summary { 636 | display: list-item; 637 | } 638 | 639 | /* 640 | Removes the default spacing and border for appropriate elements. 641 | */ 642 | 643 | blockquote, 644 | dl, 645 | dd, 646 | h1, 647 | h2, 648 | h3, 649 | h4, 650 | h5, 651 | h6, 652 | hr, 653 | figure, 654 | p, 655 | pre { 656 | margin: 0; 657 | } 658 | 659 | fieldset { 660 | margin: 0; 661 | padding: 0; 662 | } 663 | 664 | legend { 665 | padding: 0; 666 | } 667 | 668 | ol, 669 | ul, 670 | menu { 671 | list-style: none; 672 | margin: 0; 673 | padding: 0; 674 | } 675 | 676 | /* 677 | Prevent resizing textareas horizontally by default. 678 | */ 679 | 680 | textarea { 681 | resize: vertical; 682 | } 683 | 684 | /* 685 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 686 | 2. Set the default placeholder color to the user's configured gray 400 color. 687 | */ 688 | 689 | input::placeholder, 690 | textarea::placeholder { 691 | opacity: 1; /* 1 */ 692 | color: #9ca3af; /* 2 */ 693 | } 694 | 695 | /* 696 | Set the default cursor for buttons. 697 | */ 698 | 699 | button, 700 | [role=\\"button\\"] { 701 | cursor: pointer; 702 | } 703 | 704 | /* 705 | Make sure disabled buttons don't get the pointer cursor. 706 | */ 707 | :disabled { 708 | cursor: default; 709 | } 710 | 711 | /* 712 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 713 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 714 | This can trigger a poorly considered lint error in some tools but is included by design. 715 | */ 716 | 717 | img, 718 | svg, 719 | video, 720 | canvas, 721 | audio, 722 | iframe, 723 | embed, 724 | object { 725 | display: block; /* 1 */ 726 | vertical-align: middle; /* 2 */ 727 | } 728 | 729 | /* 730 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 731 | */ 732 | 733 | img, 734 | video { 735 | max-width: 100%; 736 | height: auto; 737 | } 738 | 739 | /* 740 | Ensure the default browser behavior of the \`hidden\` attribute. 741 | */ 742 | 743 | [hidden] { 744 | display: none; 745 | } 746 | 747 | body { 748 | --tw-bg-opacity: 1; 749 | background-color: rgb(15 23 42 / var(--tw-bg-opacity)); 750 | --tw-text-opacity: 1; 751 | color: rgb(248 250 252 / var(--tw-text-opacity)); 752 | } 753 | " 754 | `; 755 | 756 | exports[`integration 3`] = ` 757 | "/* 758 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 759 | *//* 760 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 761 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 762 | */ 763 | 764 | *, 765 | ::before, 766 | ::after { 767 | box-sizing: border-box; /* 1 */ 768 | border-width: 0; /* 2 */ 769 | border-style: solid; /* 2 */ 770 | border-color: currentColor; /* 2 */ 771 | } 772 | 773 | ::before, 774 | ::after { 775 | --tw-content: ''; 776 | } 777 | 778 | /* 779 | 1. Use a consistent sensible line-height in all browsers. 780 | 2. Prevent adjustments of font size after orientation changes in iOS. 781 | 3. Use a more readable tab size. 782 | 4. Use the user's configured \`sans\` font-family by default. 783 | */ 784 | 785 | html { 786 | line-height: 1.5; /* 1 */ 787 | -webkit-text-size-adjust: 100%; /* 2 */ 788 | -moz-tab-size: 4; /* 3 */ 789 | tab-size: 4; /* 3 */ 790 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 791 | } 792 | 793 | /* 794 | 1. Remove the margin in all browsers. 795 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 796 | */ 797 | 798 | body { 799 | margin: 0; /* 1 */ 800 | line-height: inherit; /* 2 */ 801 | } 802 | 803 | /* 804 | 1. Add the correct height in Firefox. 805 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 806 | 3. Ensure horizontal rules are visible by default. 807 | */ 808 | 809 | hr { 810 | height: 0; /* 1 */ 811 | color: inherit; /* 2 */ 812 | border-top-width: 1px; /* 3 */ 813 | } 814 | 815 | /* 816 | Add the correct text decoration in Chrome, Edge, and Safari. 817 | */ 818 | 819 | abbr[title] { 820 | text-decoration: underline dotted; 821 | } 822 | 823 | /* 824 | Remove the default font size and weight for headings. 825 | */ 826 | 827 | h1, 828 | h2, 829 | h3, 830 | h4, 831 | h5, 832 | h6 { 833 | font-size: inherit; 834 | font-weight: inherit; 835 | } 836 | 837 | /* 838 | Reset links to optimize for opt-in styling instead of opt-out. 839 | */ 840 | 841 | a { 842 | color: inherit; 843 | text-decoration: inherit; 844 | } 845 | 846 | /* 847 | Add the correct font weight in Edge and Safari. 848 | */ 849 | 850 | b, 851 | strong { 852 | font-weight: bolder; 853 | } 854 | 855 | /* 856 | 1. Use the user's configured \`mono\` font family by default. 857 | 2. Correct the odd \`em\` font sizing in all browsers. 858 | */ 859 | 860 | code, 861 | kbd, 862 | samp, 863 | pre { 864 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 865 | font-size: 1em; /* 2 */ 866 | } 867 | 868 | /* 869 | Add the correct font size in all browsers. 870 | */ 871 | 872 | small { 873 | font-size: 80%; 874 | } 875 | 876 | /* 877 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 878 | */ 879 | 880 | sub, 881 | sup { 882 | font-size: 75%; 883 | line-height: 0; 884 | position: relative; 885 | vertical-align: baseline; 886 | } 887 | 888 | sub { 889 | bottom: -0.25em; 890 | } 891 | 892 | sup { 893 | top: -0.5em; 894 | } 895 | 896 | /* 897 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 898 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 899 | 3. Remove gaps between table borders by default. 900 | */ 901 | 902 | table { 903 | text-indent: 0; /* 1 */ 904 | border-color: inherit; /* 2 */ 905 | border-collapse: collapse; /* 3 */ 906 | } 907 | 908 | /* 909 | 1. Change the font styles in all browsers. 910 | 2. Remove the margin in Firefox and Safari. 911 | 3. Remove default padding in all browsers. 912 | */ 913 | 914 | button, 915 | input, 916 | optgroup, 917 | select, 918 | textarea { 919 | font-family: inherit; /* 1 */ 920 | font-size: 100%; /* 1 */ 921 | line-height: inherit; /* 1 */ 922 | color: inherit; /* 1 */ 923 | margin: 0; /* 2 */ 924 | padding: 0; /* 3 */ 925 | } 926 | 927 | /* 928 | Remove the inheritance of text transform in Edge and Firefox. 929 | */ 930 | 931 | button, 932 | select { 933 | text-transform: none; 934 | } 935 | 936 | /* 937 | 1. Correct the inability to style clickable types in iOS and Safari. 938 | 2. Remove default button styles. 939 | */ 940 | 941 | button, 942 | [type='button'], 943 | [type='reset'], 944 | [type='submit'] { 945 | -webkit-appearance: button; /* 1 */ 946 | background-color: transparent; /* 2 */ 947 | background-image: none; /* 2 */ 948 | } 949 | 950 | /* 951 | Use the modern Firefox focus style for all focusable elements. 952 | */ 953 | 954 | :-moz-focusring { 955 | outline: auto; 956 | } 957 | 958 | /* 959 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 960 | */ 961 | 962 | :-moz-ui-invalid { 963 | box-shadow: none; 964 | } 965 | 966 | /* 967 | Add the correct vertical alignment in Chrome and Firefox. 968 | */ 969 | 970 | progress { 971 | vertical-align: baseline; 972 | } 973 | 974 | /* 975 | Correct the cursor style of increment and decrement buttons in Safari. 976 | */ 977 | 978 | ::-webkit-inner-spin-button, 979 | ::-webkit-outer-spin-button { 980 | height: auto; 981 | } 982 | 983 | /* 984 | 1. Correct the odd appearance in Chrome and Safari. 985 | 2. Correct the outline style in Safari. 986 | */ 987 | 988 | [type='search'] { 989 | -webkit-appearance: textfield; /* 1 */ 990 | outline-offset: -2px; /* 2 */ 991 | } 992 | 993 | /* 994 | Remove the inner padding in Chrome and Safari on macOS. 995 | */ 996 | 997 | ::-webkit-search-decoration { 998 | -webkit-appearance: none; 999 | } 1000 | 1001 | /* 1002 | 1. Correct the inability to style clickable types in iOS and Safari. 1003 | 2. Change font properties to \`inherit\` in Safari. 1004 | */ 1005 | 1006 | ::-webkit-file-upload-button { 1007 | -webkit-appearance: button; /* 1 */ 1008 | font: inherit; /* 2 */ 1009 | } 1010 | 1011 | /* 1012 | Add the correct display in Chrome and Safari. 1013 | */ 1014 | 1015 | summary { 1016 | display: list-item; 1017 | } 1018 | 1019 | /* 1020 | Removes the default spacing and border for appropriate elements. 1021 | */ 1022 | 1023 | blockquote, 1024 | dl, 1025 | dd, 1026 | h1, 1027 | h2, 1028 | h3, 1029 | h4, 1030 | h5, 1031 | h6, 1032 | hr, 1033 | figure, 1034 | p, 1035 | pre { 1036 | margin: 0; 1037 | } 1038 | 1039 | fieldset { 1040 | margin: 0; 1041 | padding: 0; 1042 | } 1043 | 1044 | legend { 1045 | padding: 0; 1046 | } 1047 | 1048 | ol, 1049 | ul, 1050 | menu { 1051 | list-style: none; 1052 | margin: 0; 1053 | padding: 0; 1054 | } 1055 | 1056 | /* 1057 | Prevent resizing textareas horizontally by default. 1058 | */ 1059 | 1060 | textarea { 1061 | resize: vertical; 1062 | } 1063 | 1064 | /* 1065 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 1066 | 2. Set the default placeholder color to the user's configured gray 400 color. 1067 | */ 1068 | 1069 | input::placeholder, 1070 | textarea::placeholder { 1071 | opacity: 1; /* 1 */ 1072 | color: #9ca3af; /* 2 */ 1073 | } 1074 | 1075 | /* 1076 | Set the default cursor for buttons. 1077 | */ 1078 | 1079 | button, 1080 | [role=\\"button\\"] { 1081 | cursor: pointer; 1082 | } 1083 | 1084 | /* 1085 | Make sure disabled buttons don't get the pointer cursor. 1086 | */ 1087 | :disabled { 1088 | cursor: default; 1089 | } 1090 | 1091 | /* 1092 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 1093 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 1094 | This can trigger a poorly considered lint error in some tools but is included by design. 1095 | */ 1096 | 1097 | img, 1098 | svg, 1099 | video, 1100 | canvas, 1101 | audio, 1102 | iframe, 1103 | embed, 1104 | object { 1105 | display: block; /* 1 */ 1106 | vertical-align: middle; /* 2 */ 1107 | } 1108 | 1109 | /* 1110 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 1111 | */ 1112 | 1113 | img, 1114 | video { 1115 | max-width: 100%; 1116 | height: auto; 1117 | } 1118 | 1119 | /* 1120 | Ensure the default browser behavior of the \`hidden\` attribute. 1121 | */ 1122 | 1123 | [hidden] { 1124 | display: none; 1125 | } 1126 | " 1127 | `; 1128 | 1129 | exports[`integration 4`] = ` 1130 | "/* 1131 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 1132 | *//* 1133 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 1134 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 1135 | */ 1136 | 1137 | *, 1138 | ::before, 1139 | ::after { 1140 | box-sizing: border-box; /* 1 */ 1141 | border-width: 0; /* 2 */ 1142 | border-style: solid; /* 2 */ 1143 | border-color: currentColor; /* 2 */ 1144 | } 1145 | 1146 | ::before, 1147 | ::after { 1148 | --tw-content: ''; 1149 | } 1150 | 1151 | /* 1152 | 1. Use a consistent sensible line-height in all browsers. 1153 | 2. Prevent adjustments of font size after orientation changes in iOS. 1154 | 3. Use a more readable tab size. 1155 | 4. Use the user's configured \`sans\` font-family by default. 1156 | */ 1157 | 1158 | html { 1159 | line-height: 1.5; /* 1 */ 1160 | -webkit-text-size-adjust: 100%; /* 2 */ 1161 | -moz-tab-size: 4; /* 3 */ 1162 | tab-size: 4; /* 3 */ 1163 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 1164 | } 1165 | 1166 | /* 1167 | 1. Remove the margin in all browsers. 1168 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 1169 | */ 1170 | 1171 | body { 1172 | margin: 0; /* 1 */ 1173 | line-height: inherit; /* 2 */ 1174 | } 1175 | 1176 | /* 1177 | 1. Add the correct height in Firefox. 1178 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 1179 | 3. Ensure horizontal rules are visible by default. 1180 | */ 1181 | 1182 | hr { 1183 | height: 0; /* 1 */ 1184 | color: inherit; /* 2 */ 1185 | border-top-width: 1px; /* 3 */ 1186 | } 1187 | 1188 | /* 1189 | Add the correct text decoration in Chrome, Edge, and Safari. 1190 | */ 1191 | 1192 | abbr[title] { 1193 | text-decoration: underline dotted; 1194 | } 1195 | 1196 | /* 1197 | Remove the default font size and weight for headings. 1198 | */ 1199 | 1200 | h1, 1201 | h2, 1202 | h3, 1203 | h4, 1204 | h5, 1205 | h6 { 1206 | font-size: inherit; 1207 | font-weight: inherit; 1208 | } 1209 | 1210 | /* 1211 | Reset links to optimize for opt-in styling instead of opt-out. 1212 | */ 1213 | 1214 | a { 1215 | color: inherit; 1216 | text-decoration: inherit; 1217 | } 1218 | 1219 | /* 1220 | Add the correct font weight in Edge and Safari. 1221 | */ 1222 | 1223 | b, 1224 | strong { 1225 | font-weight: bolder; 1226 | } 1227 | 1228 | /* 1229 | 1. Use the user's configured \`mono\` font family by default. 1230 | 2. Correct the odd \`em\` font sizing in all browsers. 1231 | */ 1232 | 1233 | code, 1234 | kbd, 1235 | samp, 1236 | pre { 1237 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 1238 | font-size: 1em; /* 2 */ 1239 | } 1240 | 1241 | /* 1242 | Add the correct font size in all browsers. 1243 | */ 1244 | 1245 | small { 1246 | font-size: 80%; 1247 | } 1248 | 1249 | /* 1250 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 1251 | */ 1252 | 1253 | sub, 1254 | sup { 1255 | font-size: 75%; 1256 | line-height: 0; 1257 | position: relative; 1258 | vertical-align: baseline; 1259 | } 1260 | 1261 | sub { 1262 | bottom: -0.25em; 1263 | } 1264 | 1265 | sup { 1266 | top: -0.5em; 1267 | } 1268 | 1269 | /* 1270 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 1271 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 1272 | 3. Remove gaps between table borders by default. 1273 | */ 1274 | 1275 | table { 1276 | text-indent: 0; /* 1 */ 1277 | border-color: inherit; /* 2 */ 1278 | border-collapse: collapse; /* 3 */ 1279 | } 1280 | 1281 | /* 1282 | 1. Change the font styles in all browsers. 1283 | 2. Remove the margin in Firefox and Safari. 1284 | 3. Remove default padding in all browsers. 1285 | */ 1286 | 1287 | button, 1288 | input, 1289 | optgroup, 1290 | select, 1291 | textarea { 1292 | font-family: inherit; /* 1 */ 1293 | font-size: 100%; /* 1 */ 1294 | line-height: inherit; /* 1 */ 1295 | color: inherit; /* 1 */ 1296 | margin: 0; /* 2 */ 1297 | padding: 0; /* 3 */ 1298 | } 1299 | 1300 | /* 1301 | Remove the inheritance of text transform in Edge and Firefox. 1302 | */ 1303 | 1304 | button, 1305 | select { 1306 | text-transform: none; 1307 | } 1308 | 1309 | /* 1310 | 1. Correct the inability to style clickable types in iOS and Safari. 1311 | 2. Remove default button styles. 1312 | */ 1313 | 1314 | button, 1315 | [type='button'], 1316 | [type='reset'], 1317 | [type='submit'] { 1318 | -webkit-appearance: button; /* 1 */ 1319 | background-color: transparent; /* 2 */ 1320 | background-image: none; /* 2 */ 1321 | } 1322 | 1323 | /* 1324 | Use the modern Firefox focus style for all focusable elements. 1325 | */ 1326 | 1327 | :-moz-focusring { 1328 | outline: auto; 1329 | } 1330 | 1331 | /* 1332 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 1333 | */ 1334 | 1335 | :-moz-ui-invalid { 1336 | box-shadow: none; 1337 | } 1338 | 1339 | /* 1340 | Add the correct vertical alignment in Chrome and Firefox. 1341 | */ 1342 | 1343 | progress { 1344 | vertical-align: baseline; 1345 | } 1346 | 1347 | /* 1348 | Correct the cursor style of increment and decrement buttons in Safari. 1349 | */ 1350 | 1351 | ::-webkit-inner-spin-button, 1352 | ::-webkit-outer-spin-button { 1353 | height: auto; 1354 | } 1355 | 1356 | /* 1357 | 1. Correct the odd appearance in Chrome and Safari. 1358 | 2. Correct the outline style in Safari. 1359 | */ 1360 | 1361 | [type='search'] { 1362 | -webkit-appearance: textfield; /* 1 */ 1363 | outline-offset: -2px; /* 2 */ 1364 | } 1365 | 1366 | /* 1367 | Remove the inner padding in Chrome and Safari on macOS. 1368 | */ 1369 | 1370 | ::-webkit-search-decoration { 1371 | -webkit-appearance: none; 1372 | } 1373 | 1374 | /* 1375 | 1. Correct the inability to style clickable types in iOS and Safari. 1376 | 2. Change font properties to \`inherit\` in Safari. 1377 | */ 1378 | 1379 | ::-webkit-file-upload-button { 1380 | -webkit-appearance: button; /* 1 */ 1381 | font: inherit; /* 2 */ 1382 | } 1383 | 1384 | /* 1385 | Add the correct display in Chrome and Safari. 1386 | */ 1387 | 1388 | summary { 1389 | display: list-item; 1390 | } 1391 | 1392 | /* 1393 | Removes the default spacing and border for appropriate elements. 1394 | */ 1395 | 1396 | blockquote, 1397 | dl, 1398 | dd, 1399 | h1, 1400 | h2, 1401 | h3, 1402 | h4, 1403 | h5, 1404 | h6, 1405 | hr, 1406 | figure, 1407 | p, 1408 | pre { 1409 | margin: 0; 1410 | } 1411 | 1412 | fieldset { 1413 | margin: 0; 1414 | padding: 0; 1415 | } 1416 | 1417 | legend { 1418 | padding: 0; 1419 | } 1420 | 1421 | ol, 1422 | ul, 1423 | menu { 1424 | list-style: none; 1425 | margin: 0; 1426 | padding: 0; 1427 | } 1428 | 1429 | /* 1430 | Prevent resizing textareas horizontally by default. 1431 | */ 1432 | 1433 | textarea { 1434 | resize: vertical; 1435 | } 1436 | 1437 | /* 1438 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 1439 | 2. Set the default placeholder color to the user's configured gray 400 color. 1440 | */ 1441 | 1442 | input::placeholder, 1443 | textarea::placeholder { 1444 | opacity: 1; /* 1 */ 1445 | color: #9ca3af; /* 2 */ 1446 | } 1447 | 1448 | /* 1449 | Set the default cursor for buttons. 1450 | */ 1451 | 1452 | button, 1453 | [role=\\"button\\"] { 1454 | cursor: pointer; 1455 | } 1456 | 1457 | /* 1458 | Make sure disabled buttons don't get the pointer cursor. 1459 | */ 1460 | :disabled { 1461 | cursor: default; 1462 | } 1463 | 1464 | /* 1465 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 1466 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 1467 | This can trigger a poorly considered lint error in some tools but is included by design. 1468 | */ 1469 | 1470 | img, 1471 | svg, 1472 | video, 1473 | canvas, 1474 | audio, 1475 | iframe, 1476 | embed, 1477 | object { 1478 | display: block; /* 1 */ 1479 | vertical-align: middle; /* 2 */ 1480 | } 1481 | 1482 | /* 1483 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 1484 | */ 1485 | 1486 | img, 1487 | video { 1488 | max-width: 100%; 1489 | height: auto; 1490 | } 1491 | 1492 | /* 1493 | Ensure the default browser behavior of the \`hidden\` attribute. 1494 | */ 1495 | 1496 | [hidden] { 1497 | display: none; 1498 | } 1499 | 1500 | body { 1501 | --tw-bg-opacity: 1; 1502 | background-color: rgb(15 23 42 / var(--tw-bg-opacity)); 1503 | --tw-text-opacity: 1; 1504 | color: rgb(248 250 252 / var(--tw-text-opacity)); 1505 | } 1506 | " 1507 | `; 1508 | -------------------------------------------------------------------------------- /test/__snapshots__/response.test.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`serving custom css in development 1`] = ` 4 | "/* 5 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 6 | *//* 7 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 8 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 9 | */ 10 | 11 | *, 12 | ::before, 13 | ::after { 14 | box-sizing: border-box; /* 1 */ 15 | border-width: 0; /* 2 */ 16 | border-style: solid; /* 2 */ 17 | border-color: currentColor; /* 2 */ 18 | } 19 | 20 | ::before, 21 | ::after { 22 | --tw-content: ''; 23 | } 24 | 25 | /* 26 | 1. Use a consistent sensible line-height in all browsers. 27 | 2. Prevent adjustments of font size after orientation changes in iOS. 28 | 3. Use a more readable tab size. 29 | 4. Use the user's configured \`sans\` font-family by default. 30 | */ 31 | 32 | html { 33 | line-height: 1.5; /* 1 */ 34 | -webkit-text-size-adjust: 100%; /* 2 */ 35 | -moz-tab-size: 4; /* 3 */ 36 | tab-size: 4; /* 3 */ 37 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 38 | } 39 | 40 | /* 41 | 1. Remove the margin in all browsers. 42 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 43 | */ 44 | 45 | body { 46 | margin: 0; /* 1 */ 47 | line-height: inherit; /* 2 */ 48 | } 49 | 50 | /* 51 | 1. Add the correct height in Firefox. 52 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 53 | 3. Ensure horizontal rules are visible by default. 54 | */ 55 | 56 | hr { 57 | height: 0; /* 1 */ 58 | color: inherit; /* 2 */ 59 | border-top-width: 1px; /* 3 */ 60 | } 61 | 62 | /* 63 | Add the correct text decoration in Chrome, Edge, and Safari. 64 | */ 65 | 66 | abbr[title] { 67 | text-decoration: underline dotted; 68 | } 69 | 70 | /* 71 | Remove the default font size and weight for headings. 72 | */ 73 | 74 | h1, 75 | h2, 76 | h3, 77 | h4, 78 | h5, 79 | h6 { 80 | font-size: inherit; 81 | font-weight: inherit; 82 | } 83 | 84 | /* 85 | Reset links to optimize for opt-in styling instead of opt-out. 86 | */ 87 | 88 | a { 89 | color: inherit; 90 | text-decoration: inherit; 91 | } 92 | 93 | /* 94 | Add the correct font weight in Edge and Safari. 95 | */ 96 | 97 | b, 98 | strong { 99 | font-weight: bolder; 100 | } 101 | 102 | /* 103 | 1. Use the user's configured \`mono\` font family by default. 104 | 2. Correct the odd \`em\` font sizing in all browsers. 105 | */ 106 | 107 | code, 108 | kbd, 109 | samp, 110 | pre { 111 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 112 | font-size: 1em; /* 2 */ 113 | } 114 | 115 | /* 116 | Add the correct font size in all browsers. 117 | */ 118 | 119 | small { 120 | font-size: 80%; 121 | } 122 | 123 | /* 124 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 125 | */ 126 | 127 | sub, 128 | sup { 129 | font-size: 75%; 130 | line-height: 0; 131 | position: relative; 132 | vertical-align: baseline; 133 | } 134 | 135 | sub { 136 | bottom: -0.25em; 137 | } 138 | 139 | sup { 140 | top: -0.5em; 141 | } 142 | 143 | /* 144 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 145 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 146 | 3. Remove gaps between table borders by default. 147 | */ 148 | 149 | table { 150 | text-indent: 0; /* 1 */ 151 | border-color: inherit; /* 2 */ 152 | border-collapse: collapse; /* 3 */ 153 | } 154 | 155 | /* 156 | 1. Change the font styles in all browsers. 157 | 2. Remove the margin in Firefox and Safari. 158 | 3. Remove default padding in all browsers. 159 | */ 160 | 161 | button, 162 | input, 163 | optgroup, 164 | select, 165 | textarea { 166 | font-family: inherit; /* 1 */ 167 | font-size: 100%; /* 1 */ 168 | line-height: inherit; /* 1 */ 169 | color: inherit; /* 1 */ 170 | margin: 0; /* 2 */ 171 | padding: 0; /* 3 */ 172 | } 173 | 174 | /* 175 | Remove the inheritance of text transform in Edge and Firefox. 176 | */ 177 | 178 | button, 179 | select { 180 | text-transform: none; 181 | } 182 | 183 | /* 184 | 1. Correct the inability to style clickable types in iOS and Safari. 185 | 2. Remove default button styles. 186 | */ 187 | 188 | button, 189 | [type='button'], 190 | [type='reset'], 191 | [type='submit'] { 192 | -webkit-appearance: button; /* 1 */ 193 | background-color: transparent; /* 2 */ 194 | background-image: none; /* 2 */ 195 | } 196 | 197 | /* 198 | Use the modern Firefox focus style for all focusable elements. 199 | */ 200 | 201 | :-moz-focusring { 202 | outline: auto; 203 | } 204 | 205 | /* 206 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 207 | */ 208 | 209 | :-moz-ui-invalid { 210 | box-shadow: none; 211 | } 212 | 213 | /* 214 | Add the correct vertical alignment in Chrome and Firefox. 215 | */ 216 | 217 | progress { 218 | vertical-align: baseline; 219 | } 220 | 221 | /* 222 | Correct the cursor style of increment and decrement buttons in Safari. 223 | */ 224 | 225 | ::-webkit-inner-spin-button, 226 | ::-webkit-outer-spin-button { 227 | height: auto; 228 | } 229 | 230 | /* 231 | 1. Correct the odd appearance in Chrome and Safari. 232 | 2. Correct the outline style in Safari. 233 | */ 234 | 235 | [type='search'] { 236 | -webkit-appearance: textfield; /* 1 */ 237 | outline-offset: -2px; /* 2 */ 238 | } 239 | 240 | /* 241 | Remove the inner padding in Chrome and Safari on macOS. 242 | */ 243 | 244 | ::-webkit-search-decoration { 245 | -webkit-appearance: none; 246 | } 247 | 248 | /* 249 | 1. Correct the inability to style clickable types in iOS and Safari. 250 | 2. Change font properties to \`inherit\` in Safari. 251 | */ 252 | 253 | ::-webkit-file-upload-button { 254 | -webkit-appearance: button; /* 1 */ 255 | font: inherit; /* 2 */ 256 | } 257 | 258 | /* 259 | Add the correct display in Chrome and Safari. 260 | */ 261 | 262 | summary { 263 | display: list-item; 264 | } 265 | 266 | /* 267 | Removes the default spacing and border for appropriate elements. 268 | */ 269 | 270 | blockquote, 271 | dl, 272 | dd, 273 | h1, 274 | h2, 275 | h3, 276 | h4, 277 | h5, 278 | h6, 279 | hr, 280 | figure, 281 | p, 282 | pre { 283 | margin: 0; 284 | } 285 | 286 | fieldset { 287 | margin: 0; 288 | padding: 0; 289 | } 290 | 291 | legend { 292 | padding: 0; 293 | } 294 | 295 | ol, 296 | ul, 297 | menu { 298 | list-style: none; 299 | margin: 0; 300 | padding: 0; 301 | } 302 | 303 | /* 304 | Prevent resizing textareas horizontally by default. 305 | */ 306 | 307 | textarea { 308 | resize: vertical; 309 | } 310 | 311 | /* 312 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 313 | 2. Set the default placeholder color to the user's configured gray 400 color. 314 | */ 315 | 316 | input::placeholder, 317 | textarea::placeholder { 318 | opacity: 1; /* 1 */ 319 | color: #9ca3af; /* 2 */ 320 | } 321 | 322 | /* 323 | Set the default cursor for buttons. 324 | */ 325 | 326 | button, 327 | [role=\\"button\\"] { 328 | cursor: pointer; 329 | } 330 | 331 | /* 332 | Make sure disabled buttons don't get the pointer cursor. 333 | */ 334 | :disabled { 335 | cursor: default; 336 | } 337 | 338 | /* 339 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 340 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 341 | This can trigger a poorly considered lint error in some tools but is included by design. 342 | */ 343 | 344 | img, 345 | svg, 346 | video, 347 | canvas, 348 | audio, 349 | iframe, 350 | embed, 351 | object { 352 | display: block; /* 1 */ 353 | vertical-align: middle; /* 2 */ 354 | } 355 | 356 | /* 357 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 358 | */ 359 | 360 | img, 361 | video { 362 | max-width: 100%; 363 | height: auto; 364 | } 365 | 366 | /* 367 | Ensure the default browser behavior of the \`hidden\` attribute. 368 | */ 369 | 370 | [hidden] { 371 | display: none; 372 | } 373 | 374 | html, 375 | body { 376 | background: papayawhip; 377 | color: palevioletred; 378 | } 379 | " 380 | `; 381 | 382 | exports[`serving custom css in development 2`] = ` 383 | "/* 384 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 385 | *//* 386 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 387 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 388 | */ 389 | 390 | *, 391 | ::before, 392 | ::after { 393 | box-sizing: border-box; /* 1 */ 394 | border-width: 0; /* 2 */ 395 | border-style: solid; /* 2 */ 396 | border-color: currentColor; /* 2 */ 397 | } 398 | 399 | ::before, 400 | ::after { 401 | --tw-content: ''; 402 | } 403 | 404 | /* 405 | 1. Use a consistent sensible line-height in all browsers. 406 | 2. Prevent adjustments of font size after orientation changes in iOS. 407 | 3. Use a more readable tab size. 408 | 4. Use the user's configured \`sans\` font-family by default. 409 | */ 410 | 411 | html { 412 | line-height: 1.5; /* 1 */ 413 | -webkit-text-size-adjust: 100%; /* 2 */ 414 | -moz-tab-size: 4; /* 3 */ 415 | tab-size: 4; /* 3 */ 416 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 417 | } 418 | 419 | /* 420 | 1. Remove the margin in all browsers. 421 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 422 | */ 423 | 424 | body { 425 | margin: 0; /* 1 */ 426 | line-height: inherit; /* 2 */ 427 | } 428 | 429 | /* 430 | 1. Add the correct height in Firefox. 431 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 432 | 3. Ensure horizontal rules are visible by default. 433 | */ 434 | 435 | hr { 436 | height: 0; /* 1 */ 437 | color: inherit; /* 2 */ 438 | border-top-width: 1px; /* 3 */ 439 | } 440 | 441 | /* 442 | Add the correct text decoration in Chrome, Edge, and Safari. 443 | */ 444 | 445 | abbr[title] { 446 | text-decoration: underline dotted; 447 | } 448 | 449 | /* 450 | Remove the default font size and weight for headings. 451 | */ 452 | 453 | h1, 454 | h2, 455 | h3, 456 | h4, 457 | h5, 458 | h6 { 459 | font-size: inherit; 460 | font-weight: inherit; 461 | } 462 | 463 | /* 464 | Reset links to optimize for opt-in styling instead of opt-out. 465 | */ 466 | 467 | a { 468 | color: inherit; 469 | text-decoration: inherit; 470 | } 471 | 472 | /* 473 | Add the correct font weight in Edge and Safari. 474 | */ 475 | 476 | b, 477 | strong { 478 | font-weight: bolder; 479 | } 480 | 481 | /* 482 | 1. Use the user's configured \`mono\` font family by default. 483 | 2. Correct the odd \`em\` font sizing in all browsers. 484 | */ 485 | 486 | code, 487 | kbd, 488 | samp, 489 | pre { 490 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 491 | font-size: 1em; /* 2 */ 492 | } 493 | 494 | /* 495 | Add the correct font size in all browsers. 496 | */ 497 | 498 | small { 499 | font-size: 80%; 500 | } 501 | 502 | /* 503 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 504 | */ 505 | 506 | sub, 507 | sup { 508 | font-size: 75%; 509 | line-height: 0; 510 | position: relative; 511 | vertical-align: baseline; 512 | } 513 | 514 | sub { 515 | bottom: -0.25em; 516 | } 517 | 518 | sup { 519 | top: -0.5em; 520 | } 521 | 522 | /* 523 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 524 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 525 | 3. Remove gaps between table borders by default. 526 | */ 527 | 528 | table { 529 | text-indent: 0; /* 1 */ 530 | border-color: inherit; /* 2 */ 531 | border-collapse: collapse; /* 3 */ 532 | } 533 | 534 | /* 535 | 1. Change the font styles in all browsers. 536 | 2. Remove the margin in Firefox and Safari. 537 | 3. Remove default padding in all browsers. 538 | */ 539 | 540 | button, 541 | input, 542 | optgroup, 543 | select, 544 | textarea { 545 | font-family: inherit; /* 1 */ 546 | font-size: 100%; /* 1 */ 547 | line-height: inherit; /* 1 */ 548 | color: inherit; /* 1 */ 549 | margin: 0; /* 2 */ 550 | padding: 0; /* 3 */ 551 | } 552 | 553 | /* 554 | Remove the inheritance of text transform in Edge and Firefox. 555 | */ 556 | 557 | button, 558 | select { 559 | text-transform: none; 560 | } 561 | 562 | /* 563 | 1. Correct the inability to style clickable types in iOS and Safari. 564 | 2. Remove default button styles. 565 | */ 566 | 567 | button, 568 | [type='button'], 569 | [type='reset'], 570 | [type='submit'] { 571 | -webkit-appearance: button; /* 1 */ 572 | background-color: transparent; /* 2 */ 573 | background-image: none; /* 2 */ 574 | } 575 | 576 | /* 577 | Use the modern Firefox focus style for all focusable elements. 578 | */ 579 | 580 | :-moz-focusring { 581 | outline: auto; 582 | } 583 | 584 | /* 585 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 586 | */ 587 | 588 | :-moz-ui-invalid { 589 | box-shadow: none; 590 | } 591 | 592 | /* 593 | Add the correct vertical alignment in Chrome and Firefox. 594 | */ 595 | 596 | progress { 597 | vertical-align: baseline; 598 | } 599 | 600 | /* 601 | Correct the cursor style of increment and decrement buttons in Safari. 602 | */ 603 | 604 | ::-webkit-inner-spin-button, 605 | ::-webkit-outer-spin-button { 606 | height: auto; 607 | } 608 | 609 | /* 610 | 1. Correct the odd appearance in Chrome and Safari. 611 | 2. Correct the outline style in Safari. 612 | */ 613 | 614 | [type='search'] { 615 | -webkit-appearance: textfield; /* 1 */ 616 | outline-offset: -2px; /* 2 */ 617 | } 618 | 619 | /* 620 | Remove the inner padding in Chrome and Safari on macOS. 621 | */ 622 | 623 | ::-webkit-search-decoration { 624 | -webkit-appearance: none; 625 | } 626 | 627 | /* 628 | 1. Correct the inability to style clickable types in iOS and Safari. 629 | 2. Change font properties to \`inherit\` in Safari. 630 | */ 631 | 632 | ::-webkit-file-upload-button { 633 | -webkit-appearance: button; /* 1 */ 634 | font: inherit; /* 2 */ 635 | } 636 | 637 | /* 638 | Add the correct display in Chrome and Safari. 639 | */ 640 | 641 | summary { 642 | display: list-item; 643 | } 644 | 645 | /* 646 | Removes the default spacing and border for appropriate elements. 647 | */ 648 | 649 | blockquote, 650 | dl, 651 | dd, 652 | h1, 653 | h2, 654 | h3, 655 | h4, 656 | h5, 657 | h6, 658 | hr, 659 | figure, 660 | p, 661 | pre { 662 | margin: 0; 663 | } 664 | 665 | fieldset { 666 | margin: 0; 667 | padding: 0; 668 | } 669 | 670 | legend { 671 | padding: 0; 672 | } 673 | 674 | ol, 675 | ul, 676 | menu { 677 | list-style: none; 678 | margin: 0; 679 | padding: 0; 680 | } 681 | 682 | /* 683 | Prevent resizing textareas horizontally by default. 684 | */ 685 | 686 | textarea { 687 | resize: vertical; 688 | } 689 | 690 | /* 691 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 692 | 2. Set the default placeholder color to the user's configured gray 400 color. 693 | */ 694 | 695 | input::placeholder, 696 | textarea::placeholder { 697 | opacity: 1; /* 1 */ 698 | color: #9ca3af; /* 2 */ 699 | } 700 | 701 | /* 702 | Set the default cursor for buttons. 703 | */ 704 | 705 | button, 706 | [role=\\"button\\"] { 707 | cursor: pointer; 708 | } 709 | 710 | /* 711 | Make sure disabled buttons don't get the pointer cursor. 712 | */ 713 | :disabled { 714 | cursor: default; 715 | } 716 | 717 | /* 718 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 719 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 720 | This can trigger a poorly considered lint error in some tools but is included by design. 721 | */ 722 | 723 | img, 724 | svg, 725 | video, 726 | canvas, 727 | audio, 728 | iframe, 729 | embed, 730 | object { 731 | display: block; /* 1 */ 732 | vertical-align: middle; /* 2 */ 733 | } 734 | 735 | /* 736 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 737 | */ 738 | 739 | img, 740 | video { 741 | max-width: 100%; 742 | height: auto; 743 | } 744 | 745 | /* 746 | Ensure the default browser behavior of the \`hidden\` attribute. 747 | */ 748 | 749 | [hidden] { 750 | display: none; 751 | } 752 | 753 | html, 754 | body { 755 | background: papayawhip; 756 | color: palevioletred; 757 | } 758 | " 759 | `; 760 | 761 | exports[`serving custom css in production 1`] = ` 762 | "/* 763 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 764 | *//* 765 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 766 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 767 | */ 768 | 769 | *, 770 | ::before, 771 | ::after { 772 | box-sizing: border-box; /* 1 */ 773 | border-width: 0; /* 2 */ 774 | border-style: solid; /* 2 */ 775 | border-color: currentColor; /* 2 */ 776 | } 777 | 778 | ::before, 779 | ::after { 780 | --tw-content: ''; 781 | } 782 | 783 | /* 784 | 1. Use a consistent sensible line-height in all browsers. 785 | 2. Prevent adjustments of font size after orientation changes in iOS. 786 | 3. Use a more readable tab size. 787 | 4. Use the user's configured \`sans\` font-family by default. 788 | */ 789 | 790 | html { 791 | line-height: 1.5; /* 1 */ 792 | -webkit-text-size-adjust: 100%; /* 2 */ 793 | -moz-tab-size: 4; /* 3 */ 794 | tab-size: 4; /* 3 */ 795 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 796 | } 797 | 798 | /* 799 | 1. Remove the margin in all browsers. 800 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 801 | */ 802 | 803 | body { 804 | margin: 0; /* 1 */ 805 | line-height: inherit; /* 2 */ 806 | } 807 | 808 | /* 809 | 1. Add the correct height in Firefox. 810 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 811 | 3. Ensure horizontal rules are visible by default. 812 | */ 813 | 814 | hr { 815 | height: 0; /* 1 */ 816 | color: inherit; /* 2 */ 817 | border-top-width: 1px; /* 3 */ 818 | } 819 | 820 | /* 821 | Add the correct text decoration in Chrome, Edge, and Safari. 822 | */ 823 | 824 | abbr[title] { 825 | text-decoration: underline dotted; 826 | } 827 | 828 | /* 829 | Remove the default font size and weight for headings. 830 | */ 831 | 832 | h1, 833 | h2, 834 | h3, 835 | h4, 836 | h5, 837 | h6 { 838 | font-size: inherit; 839 | font-weight: inherit; 840 | } 841 | 842 | /* 843 | Reset links to optimize for opt-in styling instead of opt-out. 844 | */ 845 | 846 | a { 847 | color: inherit; 848 | text-decoration: inherit; 849 | } 850 | 851 | /* 852 | Add the correct font weight in Edge and Safari. 853 | */ 854 | 855 | b, 856 | strong { 857 | font-weight: bolder; 858 | } 859 | 860 | /* 861 | 1. Use the user's configured \`mono\` font family by default. 862 | 2. Correct the odd \`em\` font sizing in all browsers. 863 | */ 864 | 865 | code, 866 | kbd, 867 | samp, 868 | pre { 869 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 870 | font-size: 1em; /* 2 */ 871 | } 872 | 873 | /* 874 | Add the correct font size in all browsers. 875 | */ 876 | 877 | small { 878 | font-size: 80%; 879 | } 880 | 881 | /* 882 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 883 | */ 884 | 885 | sub, 886 | sup { 887 | font-size: 75%; 888 | line-height: 0; 889 | position: relative; 890 | vertical-align: baseline; 891 | } 892 | 893 | sub { 894 | bottom: -0.25em; 895 | } 896 | 897 | sup { 898 | top: -0.5em; 899 | } 900 | 901 | /* 902 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 903 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 904 | 3. Remove gaps between table borders by default. 905 | */ 906 | 907 | table { 908 | text-indent: 0; /* 1 */ 909 | border-color: inherit; /* 2 */ 910 | border-collapse: collapse; /* 3 */ 911 | } 912 | 913 | /* 914 | 1. Change the font styles in all browsers. 915 | 2. Remove the margin in Firefox and Safari. 916 | 3. Remove default padding in all browsers. 917 | */ 918 | 919 | button, 920 | input, 921 | optgroup, 922 | select, 923 | textarea { 924 | font-family: inherit; /* 1 */ 925 | font-size: 100%; /* 1 */ 926 | line-height: inherit; /* 1 */ 927 | color: inherit; /* 1 */ 928 | margin: 0; /* 2 */ 929 | padding: 0; /* 3 */ 930 | } 931 | 932 | /* 933 | Remove the inheritance of text transform in Edge and Firefox. 934 | */ 935 | 936 | button, 937 | select { 938 | text-transform: none; 939 | } 940 | 941 | /* 942 | 1. Correct the inability to style clickable types in iOS and Safari. 943 | 2. Remove default button styles. 944 | */ 945 | 946 | button, 947 | [type='button'], 948 | [type='reset'], 949 | [type='submit'] { 950 | -webkit-appearance: button; /* 1 */ 951 | background-color: transparent; /* 2 */ 952 | background-image: none; /* 2 */ 953 | } 954 | 955 | /* 956 | Use the modern Firefox focus style for all focusable elements. 957 | */ 958 | 959 | :-moz-focusring { 960 | outline: auto; 961 | } 962 | 963 | /* 964 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 965 | */ 966 | 967 | :-moz-ui-invalid { 968 | box-shadow: none; 969 | } 970 | 971 | /* 972 | Add the correct vertical alignment in Chrome and Firefox. 973 | */ 974 | 975 | progress { 976 | vertical-align: baseline; 977 | } 978 | 979 | /* 980 | Correct the cursor style of increment and decrement buttons in Safari. 981 | */ 982 | 983 | ::-webkit-inner-spin-button, 984 | ::-webkit-outer-spin-button { 985 | height: auto; 986 | } 987 | 988 | /* 989 | 1. Correct the odd appearance in Chrome and Safari. 990 | 2. Correct the outline style in Safari. 991 | */ 992 | 993 | [type='search'] { 994 | -webkit-appearance: textfield; /* 1 */ 995 | outline-offset: -2px; /* 2 */ 996 | } 997 | 998 | /* 999 | Remove the inner padding in Chrome and Safari on macOS. 1000 | */ 1001 | 1002 | ::-webkit-search-decoration { 1003 | -webkit-appearance: none; 1004 | } 1005 | 1006 | /* 1007 | 1. Correct the inability to style clickable types in iOS and Safari. 1008 | 2. Change font properties to \`inherit\` in Safari. 1009 | */ 1010 | 1011 | ::-webkit-file-upload-button { 1012 | -webkit-appearance: button; /* 1 */ 1013 | font: inherit; /* 2 */ 1014 | } 1015 | 1016 | /* 1017 | Add the correct display in Chrome and Safari. 1018 | */ 1019 | 1020 | summary { 1021 | display: list-item; 1022 | } 1023 | 1024 | /* 1025 | Removes the default spacing and border for appropriate elements. 1026 | */ 1027 | 1028 | blockquote, 1029 | dl, 1030 | dd, 1031 | h1, 1032 | h2, 1033 | h3, 1034 | h4, 1035 | h5, 1036 | h6, 1037 | hr, 1038 | figure, 1039 | p, 1040 | pre { 1041 | margin: 0; 1042 | } 1043 | 1044 | fieldset { 1045 | margin: 0; 1046 | padding: 0; 1047 | } 1048 | 1049 | legend { 1050 | padding: 0; 1051 | } 1052 | 1053 | ol, 1054 | ul, 1055 | menu { 1056 | list-style: none; 1057 | margin: 0; 1058 | padding: 0; 1059 | } 1060 | 1061 | /* 1062 | Prevent resizing textareas horizontally by default. 1063 | */ 1064 | 1065 | textarea { 1066 | resize: vertical; 1067 | } 1068 | 1069 | /* 1070 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 1071 | 2. Set the default placeholder color to the user's configured gray 400 color. 1072 | */ 1073 | 1074 | input::placeholder, 1075 | textarea::placeholder { 1076 | opacity: 1; /* 1 */ 1077 | color: #9ca3af; /* 2 */ 1078 | } 1079 | 1080 | /* 1081 | Set the default cursor for buttons. 1082 | */ 1083 | 1084 | button, 1085 | [role=\\"button\\"] { 1086 | cursor: pointer; 1087 | } 1088 | 1089 | /* 1090 | Make sure disabled buttons don't get the pointer cursor. 1091 | */ 1092 | :disabled { 1093 | cursor: default; 1094 | } 1095 | 1096 | /* 1097 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 1098 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 1099 | This can trigger a poorly considered lint error in some tools but is included by design. 1100 | */ 1101 | 1102 | img, 1103 | svg, 1104 | video, 1105 | canvas, 1106 | audio, 1107 | iframe, 1108 | embed, 1109 | object { 1110 | display: block; /* 1 */ 1111 | vertical-align: middle; /* 2 */ 1112 | } 1113 | 1114 | /* 1115 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 1116 | */ 1117 | 1118 | img, 1119 | video { 1120 | max-width: 100%; 1121 | height: auto; 1122 | } 1123 | 1124 | /* 1125 | Ensure the default browser behavior of the \`hidden\` attribute. 1126 | */ 1127 | 1128 | [hidden] { 1129 | display: none; 1130 | } 1131 | 1132 | html, 1133 | body { 1134 | background: papayawhip; 1135 | color: palevioletred; 1136 | } 1137 | " 1138 | `; 1139 | 1140 | exports[`serving custom css in production 2`] = ` 1141 | "/* 1142 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 1143 | *//* 1144 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 1145 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 1146 | */ 1147 | 1148 | *, 1149 | ::before, 1150 | ::after { 1151 | box-sizing: border-box; /* 1 */ 1152 | border-width: 0; /* 2 */ 1153 | border-style: solid; /* 2 */ 1154 | border-color: currentColor; /* 2 */ 1155 | } 1156 | 1157 | ::before, 1158 | ::after { 1159 | --tw-content: ''; 1160 | } 1161 | 1162 | /* 1163 | 1. Use a consistent sensible line-height in all browsers. 1164 | 2. Prevent adjustments of font size after orientation changes in iOS. 1165 | 3. Use a more readable tab size. 1166 | 4. Use the user's configured \`sans\` font-family by default. 1167 | */ 1168 | 1169 | html { 1170 | line-height: 1.5; /* 1 */ 1171 | -webkit-text-size-adjust: 100%; /* 2 */ 1172 | -moz-tab-size: 4; /* 3 */ 1173 | tab-size: 4; /* 3 */ 1174 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 1175 | } 1176 | 1177 | /* 1178 | 1. Remove the margin in all browsers. 1179 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 1180 | */ 1181 | 1182 | body { 1183 | margin: 0; /* 1 */ 1184 | line-height: inherit; /* 2 */ 1185 | } 1186 | 1187 | /* 1188 | 1. Add the correct height in Firefox. 1189 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 1190 | 3. Ensure horizontal rules are visible by default. 1191 | */ 1192 | 1193 | hr { 1194 | height: 0; /* 1 */ 1195 | color: inherit; /* 2 */ 1196 | border-top-width: 1px; /* 3 */ 1197 | } 1198 | 1199 | /* 1200 | Add the correct text decoration in Chrome, Edge, and Safari. 1201 | */ 1202 | 1203 | abbr[title] { 1204 | text-decoration: underline dotted; 1205 | } 1206 | 1207 | /* 1208 | Remove the default font size and weight for headings. 1209 | */ 1210 | 1211 | h1, 1212 | h2, 1213 | h3, 1214 | h4, 1215 | h5, 1216 | h6 { 1217 | font-size: inherit; 1218 | font-weight: inherit; 1219 | } 1220 | 1221 | /* 1222 | Reset links to optimize for opt-in styling instead of opt-out. 1223 | */ 1224 | 1225 | a { 1226 | color: inherit; 1227 | text-decoration: inherit; 1228 | } 1229 | 1230 | /* 1231 | Add the correct font weight in Edge and Safari. 1232 | */ 1233 | 1234 | b, 1235 | strong { 1236 | font-weight: bolder; 1237 | } 1238 | 1239 | /* 1240 | 1. Use the user's configured \`mono\` font family by default. 1241 | 2. Correct the odd \`em\` font sizing in all browsers. 1242 | */ 1243 | 1244 | code, 1245 | kbd, 1246 | samp, 1247 | pre { 1248 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 1249 | font-size: 1em; /* 2 */ 1250 | } 1251 | 1252 | /* 1253 | Add the correct font size in all browsers. 1254 | */ 1255 | 1256 | small { 1257 | font-size: 80%; 1258 | } 1259 | 1260 | /* 1261 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 1262 | */ 1263 | 1264 | sub, 1265 | sup { 1266 | font-size: 75%; 1267 | line-height: 0; 1268 | position: relative; 1269 | vertical-align: baseline; 1270 | } 1271 | 1272 | sub { 1273 | bottom: -0.25em; 1274 | } 1275 | 1276 | sup { 1277 | top: -0.5em; 1278 | } 1279 | 1280 | /* 1281 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 1282 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 1283 | 3. Remove gaps between table borders by default. 1284 | */ 1285 | 1286 | table { 1287 | text-indent: 0; /* 1 */ 1288 | border-color: inherit; /* 2 */ 1289 | border-collapse: collapse; /* 3 */ 1290 | } 1291 | 1292 | /* 1293 | 1. Change the font styles in all browsers. 1294 | 2. Remove the margin in Firefox and Safari. 1295 | 3. Remove default padding in all browsers. 1296 | */ 1297 | 1298 | button, 1299 | input, 1300 | optgroup, 1301 | select, 1302 | textarea { 1303 | font-family: inherit; /* 1 */ 1304 | font-size: 100%; /* 1 */ 1305 | line-height: inherit; /* 1 */ 1306 | color: inherit; /* 1 */ 1307 | margin: 0; /* 2 */ 1308 | padding: 0; /* 3 */ 1309 | } 1310 | 1311 | /* 1312 | Remove the inheritance of text transform in Edge and Firefox. 1313 | */ 1314 | 1315 | button, 1316 | select { 1317 | text-transform: none; 1318 | } 1319 | 1320 | /* 1321 | 1. Correct the inability to style clickable types in iOS and Safari. 1322 | 2. Remove default button styles. 1323 | */ 1324 | 1325 | button, 1326 | [type='button'], 1327 | [type='reset'], 1328 | [type='submit'] { 1329 | -webkit-appearance: button; /* 1 */ 1330 | background-color: transparent; /* 2 */ 1331 | background-image: none; /* 2 */ 1332 | } 1333 | 1334 | /* 1335 | Use the modern Firefox focus style for all focusable elements. 1336 | */ 1337 | 1338 | :-moz-focusring { 1339 | outline: auto; 1340 | } 1341 | 1342 | /* 1343 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 1344 | */ 1345 | 1346 | :-moz-ui-invalid { 1347 | box-shadow: none; 1348 | } 1349 | 1350 | /* 1351 | Add the correct vertical alignment in Chrome and Firefox. 1352 | */ 1353 | 1354 | progress { 1355 | vertical-align: baseline; 1356 | } 1357 | 1358 | /* 1359 | Correct the cursor style of increment and decrement buttons in Safari. 1360 | */ 1361 | 1362 | ::-webkit-inner-spin-button, 1363 | ::-webkit-outer-spin-button { 1364 | height: auto; 1365 | } 1366 | 1367 | /* 1368 | 1. Correct the odd appearance in Chrome and Safari. 1369 | 2. Correct the outline style in Safari. 1370 | */ 1371 | 1372 | [type='search'] { 1373 | -webkit-appearance: textfield; /* 1 */ 1374 | outline-offset: -2px; /* 2 */ 1375 | } 1376 | 1377 | /* 1378 | Remove the inner padding in Chrome and Safari on macOS. 1379 | */ 1380 | 1381 | ::-webkit-search-decoration { 1382 | -webkit-appearance: none; 1383 | } 1384 | 1385 | /* 1386 | 1. Correct the inability to style clickable types in iOS and Safari. 1387 | 2. Change font properties to \`inherit\` in Safari. 1388 | */ 1389 | 1390 | ::-webkit-file-upload-button { 1391 | -webkit-appearance: button; /* 1 */ 1392 | font: inherit; /* 2 */ 1393 | } 1394 | 1395 | /* 1396 | Add the correct display in Chrome and Safari. 1397 | */ 1398 | 1399 | summary { 1400 | display: list-item; 1401 | } 1402 | 1403 | /* 1404 | Removes the default spacing and border for appropriate elements. 1405 | */ 1406 | 1407 | blockquote, 1408 | dl, 1409 | dd, 1410 | h1, 1411 | h2, 1412 | h3, 1413 | h4, 1414 | h5, 1415 | h6, 1416 | hr, 1417 | figure, 1418 | p, 1419 | pre { 1420 | margin: 0; 1421 | } 1422 | 1423 | fieldset { 1424 | margin: 0; 1425 | padding: 0; 1426 | } 1427 | 1428 | legend { 1429 | padding: 0; 1430 | } 1431 | 1432 | ol, 1433 | ul, 1434 | menu { 1435 | list-style: none; 1436 | margin: 0; 1437 | padding: 0; 1438 | } 1439 | 1440 | /* 1441 | Prevent resizing textareas horizontally by default. 1442 | */ 1443 | 1444 | textarea { 1445 | resize: vertical; 1446 | } 1447 | 1448 | /* 1449 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 1450 | 2. Set the default placeholder color to the user's configured gray 400 color. 1451 | */ 1452 | 1453 | input::placeholder, 1454 | textarea::placeholder { 1455 | opacity: 1; /* 1 */ 1456 | color: #9ca3af; /* 2 */ 1457 | } 1458 | 1459 | /* 1460 | Set the default cursor for buttons. 1461 | */ 1462 | 1463 | button, 1464 | [role=\\"button\\"] { 1465 | cursor: pointer; 1466 | } 1467 | 1468 | /* 1469 | Make sure disabled buttons don't get the pointer cursor. 1470 | */ 1471 | :disabled { 1472 | cursor: default; 1473 | } 1474 | 1475 | /* 1476 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 1477 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 1478 | This can trigger a poorly considered lint error in some tools but is included by design. 1479 | */ 1480 | 1481 | img, 1482 | svg, 1483 | video, 1484 | canvas, 1485 | audio, 1486 | iframe, 1487 | embed, 1488 | object { 1489 | display: block; /* 1 */ 1490 | vertical-align: middle; /* 2 */ 1491 | } 1492 | 1493 | /* 1494 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 1495 | */ 1496 | 1497 | img, 1498 | video { 1499 | max-width: 100%; 1500 | height: auto; 1501 | } 1502 | 1503 | /* 1504 | Ensure the default browser behavior of the \`hidden\` attribute. 1505 | */ 1506 | 1507 | [hidden] { 1508 | display: none; 1509 | } 1510 | 1511 | html, 1512 | body { 1513 | background: papayawhip; 1514 | color: palevioletred; 1515 | } 1516 | " 1517 | `; 1518 | 1519 | exports[`serving default css in development 1`] = ` 1520 | "/* 1521 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 1522 | *//* 1523 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 1524 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 1525 | */ 1526 | 1527 | *, 1528 | ::before, 1529 | ::after { 1530 | box-sizing: border-box; /* 1 */ 1531 | border-width: 0; /* 2 */ 1532 | border-style: solid; /* 2 */ 1533 | border-color: currentColor; /* 2 */ 1534 | } 1535 | 1536 | ::before, 1537 | ::after { 1538 | --tw-content: ''; 1539 | } 1540 | 1541 | /* 1542 | 1. Use a consistent sensible line-height in all browsers. 1543 | 2. Prevent adjustments of font size after orientation changes in iOS. 1544 | 3. Use a more readable tab size. 1545 | 4. Use the user's configured \`sans\` font-family by default. 1546 | */ 1547 | 1548 | html { 1549 | line-height: 1.5; /* 1 */ 1550 | -webkit-text-size-adjust: 100%; /* 2 */ 1551 | -moz-tab-size: 4; /* 3 */ 1552 | tab-size: 4; /* 3 */ 1553 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 1554 | } 1555 | 1556 | /* 1557 | 1. Remove the margin in all browsers. 1558 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 1559 | */ 1560 | 1561 | body { 1562 | margin: 0; /* 1 */ 1563 | line-height: inherit; /* 2 */ 1564 | } 1565 | 1566 | /* 1567 | 1. Add the correct height in Firefox. 1568 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 1569 | 3. Ensure horizontal rules are visible by default. 1570 | */ 1571 | 1572 | hr { 1573 | height: 0; /* 1 */ 1574 | color: inherit; /* 2 */ 1575 | border-top-width: 1px; /* 3 */ 1576 | } 1577 | 1578 | /* 1579 | Add the correct text decoration in Chrome, Edge, and Safari. 1580 | */ 1581 | 1582 | abbr[title] { 1583 | text-decoration: underline dotted; 1584 | } 1585 | 1586 | /* 1587 | Remove the default font size and weight for headings. 1588 | */ 1589 | 1590 | h1, 1591 | h2, 1592 | h3, 1593 | h4, 1594 | h5, 1595 | h6 { 1596 | font-size: inherit; 1597 | font-weight: inherit; 1598 | } 1599 | 1600 | /* 1601 | Reset links to optimize for opt-in styling instead of opt-out. 1602 | */ 1603 | 1604 | a { 1605 | color: inherit; 1606 | text-decoration: inherit; 1607 | } 1608 | 1609 | /* 1610 | Add the correct font weight in Edge and Safari. 1611 | */ 1612 | 1613 | b, 1614 | strong { 1615 | font-weight: bolder; 1616 | } 1617 | 1618 | /* 1619 | 1. Use the user's configured \`mono\` font family by default. 1620 | 2. Correct the odd \`em\` font sizing in all browsers. 1621 | */ 1622 | 1623 | code, 1624 | kbd, 1625 | samp, 1626 | pre { 1627 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 1628 | font-size: 1em; /* 2 */ 1629 | } 1630 | 1631 | /* 1632 | Add the correct font size in all browsers. 1633 | */ 1634 | 1635 | small { 1636 | font-size: 80%; 1637 | } 1638 | 1639 | /* 1640 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 1641 | */ 1642 | 1643 | sub, 1644 | sup { 1645 | font-size: 75%; 1646 | line-height: 0; 1647 | position: relative; 1648 | vertical-align: baseline; 1649 | } 1650 | 1651 | sub { 1652 | bottom: -0.25em; 1653 | } 1654 | 1655 | sup { 1656 | top: -0.5em; 1657 | } 1658 | 1659 | /* 1660 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 1661 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 1662 | 3. Remove gaps between table borders by default. 1663 | */ 1664 | 1665 | table { 1666 | text-indent: 0; /* 1 */ 1667 | border-color: inherit; /* 2 */ 1668 | border-collapse: collapse; /* 3 */ 1669 | } 1670 | 1671 | /* 1672 | 1. Change the font styles in all browsers. 1673 | 2. Remove the margin in Firefox and Safari. 1674 | 3. Remove default padding in all browsers. 1675 | */ 1676 | 1677 | button, 1678 | input, 1679 | optgroup, 1680 | select, 1681 | textarea { 1682 | font-family: inherit; /* 1 */ 1683 | font-size: 100%; /* 1 */ 1684 | line-height: inherit; /* 1 */ 1685 | color: inherit; /* 1 */ 1686 | margin: 0; /* 2 */ 1687 | padding: 0; /* 3 */ 1688 | } 1689 | 1690 | /* 1691 | Remove the inheritance of text transform in Edge and Firefox. 1692 | */ 1693 | 1694 | button, 1695 | select { 1696 | text-transform: none; 1697 | } 1698 | 1699 | /* 1700 | 1. Correct the inability to style clickable types in iOS and Safari. 1701 | 2. Remove default button styles. 1702 | */ 1703 | 1704 | button, 1705 | [type='button'], 1706 | [type='reset'], 1707 | [type='submit'] { 1708 | -webkit-appearance: button; /* 1 */ 1709 | background-color: transparent; /* 2 */ 1710 | background-image: none; /* 2 */ 1711 | } 1712 | 1713 | /* 1714 | Use the modern Firefox focus style for all focusable elements. 1715 | */ 1716 | 1717 | :-moz-focusring { 1718 | outline: auto; 1719 | } 1720 | 1721 | /* 1722 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 1723 | */ 1724 | 1725 | :-moz-ui-invalid { 1726 | box-shadow: none; 1727 | } 1728 | 1729 | /* 1730 | Add the correct vertical alignment in Chrome and Firefox. 1731 | */ 1732 | 1733 | progress { 1734 | vertical-align: baseline; 1735 | } 1736 | 1737 | /* 1738 | Correct the cursor style of increment and decrement buttons in Safari. 1739 | */ 1740 | 1741 | ::-webkit-inner-spin-button, 1742 | ::-webkit-outer-spin-button { 1743 | height: auto; 1744 | } 1745 | 1746 | /* 1747 | 1. Correct the odd appearance in Chrome and Safari. 1748 | 2. Correct the outline style in Safari. 1749 | */ 1750 | 1751 | [type='search'] { 1752 | -webkit-appearance: textfield; /* 1 */ 1753 | outline-offset: -2px; /* 2 */ 1754 | } 1755 | 1756 | /* 1757 | Remove the inner padding in Chrome and Safari on macOS. 1758 | */ 1759 | 1760 | ::-webkit-search-decoration { 1761 | -webkit-appearance: none; 1762 | } 1763 | 1764 | /* 1765 | 1. Correct the inability to style clickable types in iOS and Safari. 1766 | 2. Change font properties to \`inherit\` in Safari. 1767 | */ 1768 | 1769 | ::-webkit-file-upload-button { 1770 | -webkit-appearance: button; /* 1 */ 1771 | font: inherit; /* 2 */ 1772 | } 1773 | 1774 | /* 1775 | Add the correct display in Chrome and Safari. 1776 | */ 1777 | 1778 | summary { 1779 | display: list-item; 1780 | } 1781 | 1782 | /* 1783 | Removes the default spacing and border for appropriate elements. 1784 | */ 1785 | 1786 | blockquote, 1787 | dl, 1788 | dd, 1789 | h1, 1790 | h2, 1791 | h3, 1792 | h4, 1793 | h5, 1794 | h6, 1795 | hr, 1796 | figure, 1797 | p, 1798 | pre { 1799 | margin: 0; 1800 | } 1801 | 1802 | fieldset { 1803 | margin: 0; 1804 | padding: 0; 1805 | } 1806 | 1807 | legend { 1808 | padding: 0; 1809 | } 1810 | 1811 | ol, 1812 | ul, 1813 | menu { 1814 | list-style: none; 1815 | margin: 0; 1816 | padding: 0; 1817 | } 1818 | 1819 | /* 1820 | Prevent resizing textareas horizontally by default. 1821 | */ 1822 | 1823 | textarea { 1824 | resize: vertical; 1825 | } 1826 | 1827 | /* 1828 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 1829 | 2. Set the default placeholder color to the user's configured gray 400 color. 1830 | */ 1831 | 1832 | input::placeholder, 1833 | textarea::placeholder { 1834 | opacity: 1; /* 1 */ 1835 | color: #9ca3af; /* 2 */ 1836 | } 1837 | 1838 | /* 1839 | Set the default cursor for buttons. 1840 | */ 1841 | 1842 | button, 1843 | [role=\\"button\\"] { 1844 | cursor: pointer; 1845 | } 1846 | 1847 | /* 1848 | Make sure disabled buttons don't get the pointer cursor. 1849 | */ 1850 | :disabled { 1851 | cursor: default; 1852 | } 1853 | 1854 | /* 1855 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 1856 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 1857 | This can trigger a poorly considered lint error in some tools but is included by design. 1858 | */ 1859 | 1860 | img, 1861 | svg, 1862 | video, 1863 | canvas, 1864 | audio, 1865 | iframe, 1866 | embed, 1867 | object { 1868 | display: block; /* 1 */ 1869 | vertical-align: middle; /* 2 */ 1870 | } 1871 | 1872 | /* 1873 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 1874 | */ 1875 | 1876 | img, 1877 | video { 1878 | max-width: 100%; 1879 | height: auto; 1880 | } 1881 | 1882 | /* 1883 | Ensure the default browser behavior of the \`hidden\` attribute. 1884 | */ 1885 | 1886 | [hidden] { 1887 | display: none; 1888 | } 1889 | " 1890 | `; 1891 | 1892 | exports[`serving default css in development 2`] = ` 1893 | "/* 1894 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 1895 | *//* 1896 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 1897 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 1898 | */ 1899 | 1900 | *, 1901 | ::before, 1902 | ::after { 1903 | box-sizing: border-box; /* 1 */ 1904 | border-width: 0; /* 2 */ 1905 | border-style: solid; /* 2 */ 1906 | border-color: currentColor; /* 2 */ 1907 | } 1908 | 1909 | ::before, 1910 | ::after { 1911 | --tw-content: ''; 1912 | } 1913 | 1914 | /* 1915 | 1. Use a consistent sensible line-height in all browsers. 1916 | 2. Prevent adjustments of font size after orientation changes in iOS. 1917 | 3. Use a more readable tab size. 1918 | 4. Use the user's configured \`sans\` font-family by default. 1919 | */ 1920 | 1921 | html { 1922 | line-height: 1.5; /* 1 */ 1923 | -webkit-text-size-adjust: 100%; /* 2 */ 1924 | -moz-tab-size: 4; /* 3 */ 1925 | tab-size: 4; /* 3 */ 1926 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 1927 | } 1928 | 1929 | /* 1930 | 1. Remove the margin in all browsers. 1931 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 1932 | */ 1933 | 1934 | body { 1935 | margin: 0; /* 1 */ 1936 | line-height: inherit; /* 2 */ 1937 | } 1938 | 1939 | /* 1940 | 1. Add the correct height in Firefox. 1941 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 1942 | 3. Ensure horizontal rules are visible by default. 1943 | */ 1944 | 1945 | hr { 1946 | height: 0; /* 1 */ 1947 | color: inherit; /* 2 */ 1948 | border-top-width: 1px; /* 3 */ 1949 | } 1950 | 1951 | /* 1952 | Add the correct text decoration in Chrome, Edge, and Safari. 1953 | */ 1954 | 1955 | abbr[title] { 1956 | text-decoration: underline dotted; 1957 | } 1958 | 1959 | /* 1960 | Remove the default font size and weight for headings. 1961 | */ 1962 | 1963 | h1, 1964 | h2, 1965 | h3, 1966 | h4, 1967 | h5, 1968 | h6 { 1969 | font-size: inherit; 1970 | font-weight: inherit; 1971 | } 1972 | 1973 | /* 1974 | Reset links to optimize for opt-in styling instead of opt-out. 1975 | */ 1976 | 1977 | a { 1978 | color: inherit; 1979 | text-decoration: inherit; 1980 | } 1981 | 1982 | /* 1983 | Add the correct font weight in Edge and Safari. 1984 | */ 1985 | 1986 | b, 1987 | strong { 1988 | font-weight: bolder; 1989 | } 1990 | 1991 | /* 1992 | 1. Use the user's configured \`mono\` font family by default. 1993 | 2. Correct the odd \`em\` font sizing in all browsers. 1994 | */ 1995 | 1996 | code, 1997 | kbd, 1998 | samp, 1999 | pre { 2000 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 2001 | font-size: 1em; /* 2 */ 2002 | } 2003 | 2004 | /* 2005 | Add the correct font size in all browsers. 2006 | */ 2007 | 2008 | small { 2009 | font-size: 80%; 2010 | } 2011 | 2012 | /* 2013 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 2014 | */ 2015 | 2016 | sub, 2017 | sup { 2018 | font-size: 75%; 2019 | line-height: 0; 2020 | position: relative; 2021 | vertical-align: baseline; 2022 | } 2023 | 2024 | sub { 2025 | bottom: -0.25em; 2026 | } 2027 | 2028 | sup { 2029 | top: -0.5em; 2030 | } 2031 | 2032 | /* 2033 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2034 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 2035 | 3. Remove gaps between table borders by default. 2036 | */ 2037 | 2038 | table { 2039 | text-indent: 0; /* 1 */ 2040 | border-color: inherit; /* 2 */ 2041 | border-collapse: collapse; /* 3 */ 2042 | } 2043 | 2044 | /* 2045 | 1. Change the font styles in all browsers. 2046 | 2. Remove the margin in Firefox and Safari. 2047 | 3. Remove default padding in all browsers. 2048 | */ 2049 | 2050 | button, 2051 | input, 2052 | optgroup, 2053 | select, 2054 | textarea { 2055 | font-family: inherit; /* 1 */ 2056 | font-size: 100%; /* 1 */ 2057 | line-height: inherit; /* 1 */ 2058 | color: inherit; /* 1 */ 2059 | margin: 0; /* 2 */ 2060 | padding: 0; /* 3 */ 2061 | } 2062 | 2063 | /* 2064 | Remove the inheritance of text transform in Edge and Firefox. 2065 | */ 2066 | 2067 | button, 2068 | select { 2069 | text-transform: none; 2070 | } 2071 | 2072 | /* 2073 | 1. Correct the inability to style clickable types in iOS and Safari. 2074 | 2. Remove default button styles. 2075 | */ 2076 | 2077 | button, 2078 | [type='button'], 2079 | [type='reset'], 2080 | [type='submit'] { 2081 | -webkit-appearance: button; /* 1 */ 2082 | background-color: transparent; /* 2 */ 2083 | background-image: none; /* 2 */ 2084 | } 2085 | 2086 | /* 2087 | Use the modern Firefox focus style for all focusable elements. 2088 | */ 2089 | 2090 | :-moz-focusring { 2091 | outline: auto; 2092 | } 2093 | 2094 | /* 2095 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 2096 | */ 2097 | 2098 | :-moz-ui-invalid { 2099 | box-shadow: none; 2100 | } 2101 | 2102 | /* 2103 | Add the correct vertical alignment in Chrome and Firefox. 2104 | */ 2105 | 2106 | progress { 2107 | vertical-align: baseline; 2108 | } 2109 | 2110 | /* 2111 | Correct the cursor style of increment and decrement buttons in Safari. 2112 | */ 2113 | 2114 | ::-webkit-inner-spin-button, 2115 | ::-webkit-outer-spin-button { 2116 | height: auto; 2117 | } 2118 | 2119 | /* 2120 | 1. Correct the odd appearance in Chrome and Safari. 2121 | 2. Correct the outline style in Safari. 2122 | */ 2123 | 2124 | [type='search'] { 2125 | -webkit-appearance: textfield; /* 1 */ 2126 | outline-offset: -2px; /* 2 */ 2127 | } 2128 | 2129 | /* 2130 | Remove the inner padding in Chrome and Safari on macOS. 2131 | */ 2132 | 2133 | ::-webkit-search-decoration { 2134 | -webkit-appearance: none; 2135 | } 2136 | 2137 | /* 2138 | 1. Correct the inability to style clickable types in iOS and Safari. 2139 | 2. Change font properties to \`inherit\` in Safari. 2140 | */ 2141 | 2142 | ::-webkit-file-upload-button { 2143 | -webkit-appearance: button; /* 1 */ 2144 | font: inherit; /* 2 */ 2145 | } 2146 | 2147 | /* 2148 | Add the correct display in Chrome and Safari. 2149 | */ 2150 | 2151 | summary { 2152 | display: list-item; 2153 | } 2154 | 2155 | /* 2156 | Removes the default spacing and border for appropriate elements. 2157 | */ 2158 | 2159 | blockquote, 2160 | dl, 2161 | dd, 2162 | h1, 2163 | h2, 2164 | h3, 2165 | h4, 2166 | h5, 2167 | h6, 2168 | hr, 2169 | figure, 2170 | p, 2171 | pre { 2172 | margin: 0; 2173 | } 2174 | 2175 | fieldset { 2176 | margin: 0; 2177 | padding: 0; 2178 | } 2179 | 2180 | legend { 2181 | padding: 0; 2182 | } 2183 | 2184 | ol, 2185 | ul, 2186 | menu { 2187 | list-style: none; 2188 | margin: 0; 2189 | padding: 0; 2190 | } 2191 | 2192 | /* 2193 | Prevent resizing textareas horizontally by default. 2194 | */ 2195 | 2196 | textarea { 2197 | resize: vertical; 2198 | } 2199 | 2200 | /* 2201 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2202 | 2. Set the default placeholder color to the user's configured gray 400 color. 2203 | */ 2204 | 2205 | input::placeholder, 2206 | textarea::placeholder { 2207 | opacity: 1; /* 1 */ 2208 | color: #9ca3af; /* 2 */ 2209 | } 2210 | 2211 | /* 2212 | Set the default cursor for buttons. 2213 | */ 2214 | 2215 | button, 2216 | [role=\\"button\\"] { 2217 | cursor: pointer; 2218 | } 2219 | 2220 | /* 2221 | Make sure disabled buttons don't get the pointer cursor. 2222 | */ 2223 | :disabled { 2224 | cursor: default; 2225 | } 2226 | 2227 | /* 2228 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2229 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 2230 | This can trigger a poorly considered lint error in some tools but is included by design. 2231 | */ 2232 | 2233 | img, 2234 | svg, 2235 | video, 2236 | canvas, 2237 | audio, 2238 | iframe, 2239 | embed, 2240 | object { 2241 | display: block; /* 1 */ 2242 | vertical-align: middle; /* 2 */ 2243 | } 2244 | 2245 | /* 2246 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 2247 | */ 2248 | 2249 | img, 2250 | video { 2251 | max-width: 100%; 2252 | height: auto; 2253 | } 2254 | 2255 | /* 2256 | Ensure the default browser behavior of the \`hidden\` attribute. 2257 | */ 2258 | 2259 | [hidden] { 2260 | display: none; 2261 | } 2262 | " 2263 | `; 2264 | 2265 | exports[`serving default css in production 1`] = ` 2266 | "/* 2267 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 2268 | *//* 2269 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2270 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 2271 | */ 2272 | 2273 | *, 2274 | ::before, 2275 | ::after { 2276 | box-sizing: border-box; /* 1 */ 2277 | border-width: 0; /* 2 */ 2278 | border-style: solid; /* 2 */ 2279 | border-color: currentColor; /* 2 */ 2280 | } 2281 | 2282 | ::before, 2283 | ::after { 2284 | --tw-content: ''; 2285 | } 2286 | 2287 | /* 2288 | 1. Use a consistent sensible line-height in all browsers. 2289 | 2. Prevent adjustments of font size after orientation changes in iOS. 2290 | 3. Use a more readable tab size. 2291 | 4. Use the user's configured \`sans\` font-family by default. 2292 | */ 2293 | 2294 | html { 2295 | line-height: 1.5; /* 1 */ 2296 | -webkit-text-size-adjust: 100%; /* 2 */ 2297 | -moz-tab-size: 4; /* 3 */ 2298 | tab-size: 4; /* 3 */ 2299 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 2300 | } 2301 | 2302 | /* 2303 | 1. Remove the margin in all browsers. 2304 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 2305 | */ 2306 | 2307 | body { 2308 | margin: 0; /* 1 */ 2309 | line-height: inherit; /* 2 */ 2310 | } 2311 | 2312 | /* 2313 | 1. Add the correct height in Firefox. 2314 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 2315 | 3. Ensure horizontal rules are visible by default. 2316 | */ 2317 | 2318 | hr { 2319 | height: 0; /* 1 */ 2320 | color: inherit; /* 2 */ 2321 | border-top-width: 1px; /* 3 */ 2322 | } 2323 | 2324 | /* 2325 | Add the correct text decoration in Chrome, Edge, and Safari. 2326 | */ 2327 | 2328 | abbr[title] { 2329 | text-decoration: underline dotted; 2330 | } 2331 | 2332 | /* 2333 | Remove the default font size and weight for headings. 2334 | */ 2335 | 2336 | h1, 2337 | h2, 2338 | h3, 2339 | h4, 2340 | h5, 2341 | h6 { 2342 | font-size: inherit; 2343 | font-weight: inherit; 2344 | } 2345 | 2346 | /* 2347 | Reset links to optimize for opt-in styling instead of opt-out. 2348 | */ 2349 | 2350 | a { 2351 | color: inherit; 2352 | text-decoration: inherit; 2353 | } 2354 | 2355 | /* 2356 | Add the correct font weight in Edge and Safari. 2357 | */ 2358 | 2359 | b, 2360 | strong { 2361 | font-weight: bolder; 2362 | } 2363 | 2364 | /* 2365 | 1. Use the user's configured \`mono\` font family by default. 2366 | 2. Correct the odd \`em\` font sizing in all browsers. 2367 | */ 2368 | 2369 | code, 2370 | kbd, 2371 | samp, 2372 | pre { 2373 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 2374 | font-size: 1em; /* 2 */ 2375 | } 2376 | 2377 | /* 2378 | Add the correct font size in all browsers. 2379 | */ 2380 | 2381 | small { 2382 | font-size: 80%; 2383 | } 2384 | 2385 | /* 2386 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 2387 | */ 2388 | 2389 | sub, 2390 | sup { 2391 | font-size: 75%; 2392 | line-height: 0; 2393 | position: relative; 2394 | vertical-align: baseline; 2395 | } 2396 | 2397 | sub { 2398 | bottom: -0.25em; 2399 | } 2400 | 2401 | sup { 2402 | top: -0.5em; 2403 | } 2404 | 2405 | /* 2406 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2407 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 2408 | 3. Remove gaps between table borders by default. 2409 | */ 2410 | 2411 | table { 2412 | text-indent: 0; /* 1 */ 2413 | border-color: inherit; /* 2 */ 2414 | border-collapse: collapse; /* 3 */ 2415 | } 2416 | 2417 | /* 2418 | 1. Change the font styles in all browsers. 2419 | 2. Remove the margin in Firefox and Safari. 2420 | 3. Remove default padding in all browsers. 2421 | */ 2422 | 2423 | button, 2424 | input, 2425 | optgroup, 2426 | select, 2427 | textarea { 2428 | font-family: inherit; /* 1 */ 2429 | font-size: 100%; /* 1 */ 2430 | line-height: inherit; /* 1 */ 2431 | color: inherit; /* 1 */ 2432 | margin: 0; /* 2 */ 2433 | padding: 0; /* 3 */ 2434 | } 2435 | 2436 | /* 2437 | Remove the inheritance of text transform in Edge and Firefox. 2438 | */ 2439 | 2440 | button, 2441 | select { 2442 | text-transform: none; 2443 | } 2444 | 2445 | /* 2446 | 1. Correct the inability to style clickable types in iOS and Safari. 2447 | 2. Remove default button styles. 2448 | */ 2449 | 2450 | button, 2451 | [type='button'], 2452 | [type='reset'], 2453 | [type='submit'] { 2454 | -webkit-appearance: button; /* 1 */ 2455 | background-color: transparent; /* 2 */ 2456 | background-image: none; /* 2 */ 2457 | } 2458 | 2459 | /* 2460 | Use the modern Firefox focus style for all focusable elements. 2461 | */ 2462 | 2463 | :-moz-focusring { 2464 | outline: auto; 2465 | } 2466 | 2467 | /* 2468 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 2469 | */ 2470 | 2471 | :-moz-ui-invalid { 2472 | box-shadow: none; 2473 | } 2474 | 2475 | /* 2476 | Add the correct vertical alignment in Chrome and Firefox. 2477 | */ 2478 | 2479 | progress { 2480 | vertical-align: baseline; 2481 | } 2482 | 2483 | /* 2484 | Correct the cursor style of increment and decrement buttons in Safari. 2485 | */ 2486 | 2487 | ::-webkit-inner-spin-button, 2488 | ::-webkit-outer-spin-button { 2489 | height: auto; 2490 | } 2491 | 2492 | /* 2493 | 1. Correct the odd appearance in Chrome and Safari. 2494 | 2. Correct the outline style in Safari. 2495 | */ 2496 | 2497 | [type='search'] { 2498 | -webkit-appearance: textfield; /* 1 */ 2499 | outline-offset: -2px; /* 2 */ 2500 | } 2501 | 2502 | /* 2503 | Remove the inner padding in Chrome and Safari on macOS. 2504 | */ 2505 | 2506 | ::-webkit-search-decoration { 2507 | -webkit-appearance: none; 2508 | } 2509 | 2510 | /* 2511 | 1. Correct the inability to style clickable types in iOS and Safari. 2512 | 2. Change font properties to \`inherit\` in Safari. 2513 | */ 2514 | 2515 | ::-webkit-file-upload-button { 2516 | -webkit-appearance: button; /* 1 */ 2517 | font: inherit; /* 2 */ 2518 | } 2519 | 2520 | /* 2521 | Add the correct display in Chrome and Safari. 2522 | */ 2523 | 2524 | summary { 2525 | display: list-item; 2526 | } 2527 | 2528 | /* 2529 | Removes the default spacing and border for appropriate elements. 2530 | */ 2531 | 2532 | blockquote, 2533 | dl, 2534 | dd, 2535 | h1, 2536 | h2, 2537 | h3, 2538 | h4, 2539 | h5, 2540 | h6, 2541 | hr, 2542 | figure, 2543 | p, 2544 | pre { 2545 | margin: 0; 2546 | } 2547 | 2548 | fieldset { 2549 | margin: 0; 2550 | padding: 0; 2551 | } 2552 | 2553 | legend { 2554 | padding: 0; 2555 | } 2556 | 2557 | ol, 2558 | ul, 2559 | menu { 2560 | list-style: none; 2561 | margin: 0; 2562 | padding: 0; 2563 | } 2564 | 2565 | /* 2566 | Prevent resizing textareas horizontally by default. 2567 | */ 2568 | 2569 | textarea { 2570 | resize: vertical; 2571 | } 2572 | 2573 | /* 2574 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2575 | 2. Set the default placeholder color to the user's configured gray 400 color. 2576 | */ 2577 | 2578 | input::placeholder, 2579 | textarea::placeholder { 2580 | opacity: 1; /* 1 */ 2581 | color: #9ca3af; /* 2 */ 2582 | } 2583 | 2584 | /* 2585 | Set the default cursor for buttons. 2586 | */ 2587 | 2588 | button, 2589 | [role=\\"button\\"] { 2590 | cursor: pointer; 2591 | } 2592 | 2593 | /* 2594 | Make sure disabled buttons don't get the pointer cursor. 2595 | */ 2596 | :disabled { 2597 | cursor: default; 2598 | } 2599 | 2600 | /* 2601 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2602 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 2603 | This can trigger a poorly considered lint error in some tools but is included by design. 2604 | */ 2605 | 2606 | img, 2607 | svg, 2608 | video, 2609 | canvas, 2610 | audio, 2611 | iframe, 2612 | embed, 2613 | object { 2614 | display: block; /* 1 */ 2615 | vertical-align: middle; /* 2 */ 2616 | } 2617 | 2618 | /* 2619 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 2620 | */ 2621 | 2622 | img, 2623 | video { 2624 | max-width: 100%; 2625 | height: auto; 2626 | } 2627 | 2628 | /* 2629 | Ensure the default browser behavior of the \`hidden\` attribute. 2630 | */ 2631 | 2632 | [hidden] { 2633 | display: none; 2634 | } 2635 | " 2636 | `; 2637 | 2638 | exports[`serving default css in production 2`] = ` 2639 | "/* 2640 | ! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com 2641 | *//* 2642 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2643 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 2644 | */ 2645 | 2646 | *, 2647 | ::before, 2648 | ::after { 2649 | box-sizing: border-box; /* 1 */ 2650 | border-width: 0; /* 2 */ 2651 | border-style: solid; /* 2 */ 2652 | border-color: currentColor; /* 2 */ 2653 | } 2654 | 2655 | ::before, 2656 | ::after { 2657 | --tw-content: ''; 2658 | } 2659 | 2660 | /* 2661 | 1. Use a consistent sensible line-height in all browsers. 2662 | 2. Prevent adjustments of font size after orientation changes in iOS. 2663 | 3. Use a more readable tab size. 2664 | 4. Use the user's configured \`sans\` font-family by default. 2665 | */ 2666 | 2667 | html { 2668 | line-height: 1.5; /* 1 */ 2669 | -webkit-text-size-adjust: 100%; /* 2 */ 2670 | -moz-tab-size: 4; /* 3 */ 2671 | tab-size: 4; /* 3 */ 2672 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", Arial, \\"Noto Sans\\", sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\", \\"Noto Color Emoji\\"; /* 4 */ 2673 | } 2674 | 2675 | /* 2676 | 1. Remove the margin in all browsers. 2677 | 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element. 2678 | */ 2679 | 2680 | body { 2681 | margin: 0; /* 1 */ 2682 | line-height: inherit; /* 2 */ 2683 | } 2684 | 2685 | /* 2686 | 1. Add the correct height in Firefox. 2687 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 2688 | 3. Ensure horizontal rules are visible by default. 2689 | */ 2690 | 2691 | hr { 2692 | height: 0; /* 1 */ 2693 | color: inherit; /* 2 */ 2694 | border-top-width: 1px; /* 3 */ 2695 | } 2696 | 2697 | /* 2698 | Add the correct text decoration in Chrome, Edge, and Safari. 2699 | */ 2700 | 2701 | abbr[title] { 2702 | text-decoration: underline dotted; 2703 | } 2704 | 2705 | /* 2706 | Remove the default font size and weight for headings. 2707 | */ 2708 | 2709 | h1, 2710 | h2, 2711 | h3, 2712 | h4, 2713 | h5, 2714 | h6 { 2715 | font-size: inherit; 2716 | font-weight: inherit; 2717 | } 2718 | 2719 | /* 2720 | Reset links to optimize for opt-in styling instead of opt-out. 2721 | */ 2722 | 2723 | a { 2724 | color: inherit; 2725 | text-decoration: inherit; 2726 | } 2727 | 2728 | /* 2729 | Add the correct font weight in Edge and Safari. 2730 | */ 2731 | 2732 | b, 2733 | strong { 2734 | font-weight: bolder; 2735 | } 2736 | 2737 | /* 2738 | 1. Use the user's configured \`mono\` font family by default. 2739 | 2. Correct the odd \`em\` font sizing in all browsers. 2740 | */ 2741 | 2742 | code, 2743 | kbd, 2744 | samp, 2745 | pre { 2746 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\"Liberation Mono\\", \\"Courier New\\", monospace; /* 1 */ 2747 | font-size: 1em; /* 2 */ 2748 | } 2749 | 2750 | /* 2751 | Add the correct font size in all browsers. 2752 | */ 2753 | 2754 | small { 2755 | font-size: 80%; 2756 | } 2757 | 2758 | /* 2759 | Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers. 2760 | */ 2761 | 2762 | sub, 2763 | sup { 2764 | font-size: 75%; 2765 | line-height: 0; 2766 | position: relative; 2767 | vertical-align: baseline; 2768 | } 2769 | 2770 | sub { 2771 | bottom: -0.25em; 2772 | } 2773 | 2774 | sup { 2775 | top: -0.5em; 2776 | } 2777 | 2778 | /* 2779 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2780 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 2781 | 3. Remove gaps between table borders by default. 2782 | */ 2783 | 2784 | table { 2785 | text-indent: 0; /* 1 */ 2786 | border-color: inherit; /* 2 */ 2787 | border-collapse: collapse; /* 3 */ 2788 | } 2789 | 2790 | /* 2791 | 1. Change the font styles in all browsers. 2792 | 2. Remove the margin in Firefox and Safari. 2793 | 3. Remove default padding in all browsers. 2794 | */ 2795 | 2796 | button, 2797 | input, 2798 | optgroup, 2799 | select, 2800 | textarea { 2801 | font-family: inherit; /* 1 */ 2802 | font-size: 100%; /* 1 */ 2803 | line-height: inherit; /* 1 */ 2804 | color: inherit; /* 1 */ 2805 | margin: 0; /* 2 */ 2806 | padding: 0; /* 3 */ 2807 | } 2808 | 2809 | /* 2810 | Remove the inheritance of text transform in Edge and Firefox. 2811 | */ 2812 | 2813 | button, 2814 | select { 2815 | text-transform: none; 2816 | } 2817 | 2818 | /* 2819 | 1. Correct the inability to style clickable types in iOS and Safari. 2820 | 2. Remove default button styles. 2821 | */ 2822 | 2823 | button, 2824 | [type='button'], 2825 | [type='reset'], 2826 | [type='submit'] { 2827 | -webkit-appearance: button; /* 1 */ 2828 | background-color: transparent; /* 2 */ 2829 | background-image: none; /* 2 */ 2830 | } 2831 | 2832 | /* 2833 | Use the modern Firefox focus style for all focusable elements. 2834 | */ 2835 | 2836 | :-moz-focusring { 2837 | outline: auto; 2838 | } 2839 | 2840 | /* 2841 | Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 2842 | */ 2843 | 2844 | :-moz-ui-invalid { 2845 | box-shadow: none; 2846 | } 2847 | 2848 | /* 2849 | Add the correct vertical alignment in Chrome and Firefox. 2850 | */ 2851 | 2852 | progress { 2853 | vertical-align: baseline; 2854 | } 2855 | 2856 | /* 2857 | Correct the cursor style of increment and decrement buttons in Safari. 2858 | */ 2859 | 2860 | ::-webkit-inner-spin-button, 2861 | ::-webkit-outer-spin-button { 2862 | height: auto; 2863 | } 2864 | 2865 | /* 2866 | 1. Correct the odd appearance in Chrome and Safari. 2867 | 2. Correct the outline style in Safari. 2868 | */ 2869 | 2870 | [type='search'] { 2871 | -webkit-appearance: textfield; /* 1 */ 2872 | outline-offset: -2px; /* 2 */ 2873 | } 2874 | 2875 | /* 2876 | Remove the inner padding in Chrome and Safari on macOS. 2877 | */ 2878 | 2879 | ::-webkit-search-decoration { 2880 | -webkit-appearance: none; 2881 | } 2882 | 2883 | /* 2884 | 1. Correct the inability to style clickable types in iOS and Safari. 2885 | 2. Change font properties to \`inherit\` in Safari. 2886 | */ 2887 | 2888 | ::-webkit-file-upload-button { 2889 | -webkit-appearance: button; /* 1 */ 2890 | font: inherit; /* 2 */ 2891 | } 2892 | 2893 | /* 2894 | Add the correct display in Chrome and Safari. 2895 | */ 2896 | 2897 | summary { 2898 | display: list-item; 2899 | } 2900 | 2901 | /* 2902 | Removes the default spacing and border for appropriate elements. 2903 | */ 2904 | 2905 | blockquote, 2906 | dl, 2907 | dd, 2908 | h1, 2909 | h2, 2910 | h3, 2911 | h4, 2912 | h5, 2913 | h6, 2914 | hr, 2915 | figure, 2916 | p, 2917 | pre { 2918 | margin: 0; 2919 | } 2920 | 2921 | fieldset { 2922 | margin: 0; 2923 | padding: 0; 2924 | } 2925 | 2926 | legend { 2927 | padding: 0; 2928 | } 2929 | 2930 | ol, 2931 | ul, 2932 | menu { 2933 | list-style: none; 2934 | margin: 0; 2935 | padding: 0; 2936 | } 2937 | 2938 | /* 2939 | Prevent resizing textareas horizontally by default. 2940 | */ 2941 | 2942 | textarea { 2943 | resize: vertical; 2944 | } 2945 | 2946 | /* 2947 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2948 | 2. Set the default placeholder color to the user's configured gray 400 color. 2949 | */ 2950 | 2951 | input::placeholder, 2952 | textarea::placeholder { 2953 | opacity: 1; /* 1 */ 2954 | color: #9ca3af; /* 2 */ 2955 | } 2956 | 2957 | /* 2958 | Set the default cursor for buttons. 2959 | */ 2960 | 2961 | button, 2962 | [role=\\"button\\"] { 2963 | cursor: pointer; 2964 | } 2965 | 2966 | /* 2967 | Make sure disabled buttons don't get the pointer cursor. 2968 | */ 2969 | :disabled { 2970 | cursor: default; 2971 | } 2972 | 2973 | /* 2974 | 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2975 | 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 2976 | This can trigger a poorly considered lint error in some tools but is included by design. 2977 | */ 2978 | 2979 | img, 2980 | svg, 2981 | video, 2982 | canvas, 2983 | audio, 2984 | iframe, 2985 | embed, 2986 | object { 2987 | display: block; /* 1 */ 2988 | vertical-align: middle; /* 2 */ 2989 | } 2990 | 2991 | /* 2992 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 2993 | */ 2994 | 2995 | img, 2996 | video { 2997 | max-width: 100%; 2998 | height: auto; 2999 | } 3000 | 3001 | /* 3002 | Ensure the default browser behavior of the \`hidden\` attribute. 3003 | */ 3004 | 3005 | [hidden] { 3006 | display: none; 3007 | } 3008 | " 3009 | `; 3010 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | /.cache 4 | /build 5 | /public/build 6 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist = true 2 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/app/entry.client.tsx: -------------------------------------------------------------------------------- 1 | import { hydrate } from "react-dom"; 2 | import { RemixBrowser } from "remix"; 3 | 4 | hydrate(, document); 5 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/app/entry.server.tsx: -------------------------------------------------------------------------------- 1 | import { renderToString } from "react-dom/server"; 2 | import { RemixServer } from "remix"; 3 | import type { EntryContext } from "remix"; 4 | 5 | export default function handleRequest( 6 | request: Request, 7 | responseStatusCode: number, 8 | responseHeaders: Headers, 9 | remixContext: EntryContext 10 | ) { 11 | let markup = renderToString( 12 | 13 | ); 14 | 15 | responseHeaders.set("Content-Type", "text/html"); 16 | 17 | return new Response("" + markup, { 18 | status: responseStatusCode, 19 | headers: responseHeaders 20 | }); 21 | } 22 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/app/root.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import type { LinksFunction } from "remix" 3 | import { 4 | Links, 5 | LiveReload, 6 | Meta, 7 | Outlet, 8 | Scripts, 9 | ScrollRestoration, 10 | useCatch, 11 | } from "remix" 12 | 13 | export let links: LinksFunction = () => { 14 | return [{ rel: "stylesheet", href: "/tailwindcss-custom" }] 15 | } 16 | 17 | export default function App() { 18 | return ( 19 | 20 | 21 | 22 | ) 23 | } 24 | 25 | function Document({ 26 | children, 27 | title, 28 | }: { 29 | children: React.ReactNode 30 | title?: string 31 | }) { 32 | return ( 33 | 34 | 35 | 36 | 37 | {title ? {title} : null} 38 | 39 | 40 | 41 | 42 | {children} 43 | 44 | 45 | {process.env.NODE_ENV === "development" && } 46 | 47 | 48 | ) 49 | } 50 | 51 | export function CatchBoundary() { 52 | let caught = useCatch() 53 | 54 | let message 55 | switch (caught.status) { 56 | case 401: 57 | message = ( 58 |

59 | Oops! Looks like you tried to visit a page that you do not have access 60 | to. 61 |

62 | ) 63 | break 64 | case 404: 65 | message = ( 66 |

Oops! Looks like you tried to visit a page that does not exist.

67 | ) 68 | break 69 | 70 | default: 71 | throw new Error(caught.data || caught.statusText) 72 | } 73 | 74 | return ( 75 | 76 |

77 | {caught.status}: {caught.statusText} 78 |

79 | {message} 80 | 81 | ) 82 | } 83 | 84 | export function ErrorBoundary({ error }: { error: Error }) { 85 | console.error(error) 86 | return ( 87 | 88 |
89 |

There was an error

90 |

{error.message}

91 |
92 |

93 | Hey, developer, you should replace this with what you want your users 94 | to see. 95 |

96 |
97 | 98 | ) 99 | } 100 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/app/routes/index.tsx: -------------------------------------------------------------------------------- 1 | export default function Index() { 2 | return

hello world!

3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/app/routes/tailwindcss-custom.tsx: -------------------------------------------------------------------------------- 1 | import { LoaderFunction } from "remix" 2 | import { serveTailwindCss } from "remix-tailwind" 3 | 4 | export const loader: LoaderFunction = () => serveTailwindCss("app/tailwind.css") 5 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/app/routes/tailwindcss-default.tsx: -------------------------------------------------------------------------------- 1 | import { LoaderFunction } from "remix" 2 | import { serveTailwindCss } from "remix-tailwind" 3 | 4 | export const loader: LoaderFunction = () => serveTailwindCss() 5 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/app/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body { 6 | @apply bg-slate-900 text-slate-50; 7 | } 8 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "remix-app-template", 4 | "description": "", 5 | "license": "", 6 | "scripts": { 7 | "build": "remix build", 8 | "dev": "remix dev", 9 | "postinstall": "remix setup node", 10 | "start": "remix-serve build" 11 | }, 12 | "dependencies": { 13 | "@remix-run/react": "^1.1.1", 14 | "@remix-run/serve": "^1.1.1", 15 | "react": "^17.0.2", 16 | "react-dom": "^17.0.2", 17 | "remix": "^1.1.1", 18 | "remix-tailwind": "workspace:*" 19 | }, 20 | "devDependencies": { 21 | "@remix-run/dev": "^1.1.1", 22 | "@types/react": "^17.0.37", 23 | "@types/react-dom": "^17.0.11", 24 | "postcss": "^8.4.5", 25 | "tailwindcss": "^3.0.7", 26 | "typescript": "^4.5.4" 27 | }, 28 | "engines": { 29 | "node": ">=14" 30 | }, 31 | "sideEffects": false 32 | } 33 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itsMapleLeaf/remix-tailwind/1612bd2db58173e7407afab61d39cb5679c2e6aa/test/fixtures/remix-app/public/favicon.ico -------------------------------------------------------------------------------- /test/fixtures/remix-app/remix.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type {import('@remix-run/dev/config').AppConfig} 3 | */ 4 | module.exports = { 5 | appDirectory: "app", 6 | browserBuildDirectory: "public/build", 7 | publicPath: "/build/", 8 | serverBuildDirectory: "build", 9 | devServerPort: 8002 10 | }; 11 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/remix.env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["app/**/*.{ts,tsx}"], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | -------------------------------------------------------------------------------- /test/fixtures/remix-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["DOM", "DOM.Iterable", "ES2019"], 4 | "esModuleInterop": true, 5 | "jsx": "react-jsx", 6 | "moduleResolution": "node", 7 | "resolveJsonModule": true, 8 | "target": "ES2019", 9 | "strict": true, 10 | "paths": { 11 | "~/*": ["./app/*"] 12 | }, 13 | 14 | // Remix takes care of building everything in `remix build`. 15 | "noEmit": true 16 | }, 17 | "exclude": ["build", "node_modules"] 18 | } 19 | -------------------------------------------------------------------------------- /test/fixtures/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html, 6 | body { 7 | background: papayawhip; 8 | color: palevioletred; 9 | } 10 | -------------------------------------------------------------------------------- /test/integration.test.ts: -------------------------------------------------------------------------------- 1 | import { fetch } from "@remix-run/node" 2 | import type { ExecaChildProcess } from "execa" 3 | import { execa } from "execa" 4 | import { setTimeout } from "node:timers/promises" 5 | 6 | beforeAll(async () => { 7 | await execa("pnpm", ["build"]) 8 | }, 10_000) 9 | 10 | let child: ExecaChildProcess | undefined 11 | afterEach(() => { 12 | child?.cancel() 13 | }) 14 | 15 | test("integration", async () => { 16 | // dev 17 | child = execa("pnpm", ["dev"], { 18 | cwd: "test/fixtures/remix-app", 19 | stdio: "inherit", 20 | }) 21 | 22 | await assertResponses() 23 | await cancelPromise(child) 24 | 25 | // prod 26 | await execa("pnpm", ["build"], { 27 | cwd: "test/fixtures/remix-app", 28 | stdio: "inherit", 29 | }) 30 | 31 | child = execa("pnpm", ["start"], { 32 | cwd: "test/fixtures/remix-app", 33 | stdio: "inherit", 34 | }) 35 | 36 | await assertResponses() 37 | }, 20_000) 38 | 39 | async function assertResponses() { 40 | await waitForResponse("/") 41 | 42 | { 43 | const response = await waitForResponse("/tailwindcss-default") 44 | expect(response.headers.get("content-type")).toContain("text/css") 45 | expect(await response.text()).toMatchSnapshot() 46 | } 47 | 48 | { 49 | const response = await waitForResponse("/tailwindcss-custom") 50 | expect(response.headers.get("content-type")).toContain("text/css") 51 | expect(await response.text()).toMatchSnapshot() 52 | } 53 | } 54 | 55 | async function waitForResponse(path: string) { 56 | const startTime = Date.now() 57 | let error: Error | undefined 58 | 59 | while (error == undefined) { 60 | try { 61 | const url = new URL(`http://localhost:3000`) 62 | url.pathname = path 63 | 64 | const response = await fetch(url) 65 | if (!response.ok) { 66 | throw new Error( 67 | `Response failed: ${response.status} ${response.statusText}`, 68 | ) 69 | } 70 | return response 71 | // eslint-disable-next-line unicorn/catch-error-name 72 | } catch (caught) { 73 | if (Date.now() - startTime > 20_000) { 74 | error = caught instanceof Error ? caught : new Error(String(caught)) 75 | } 76 | } 77 | await setTimeout(100) 78 | } 79 | 80 | throw error 81 | } 82 | 83 | function cancelPromise(child: ExecaChildProcess) { 84 | return new Promise((resolve) => { 85 | if (child.killed) { 86 | resolve() 87 | } else { 88 | void child.once("exit", resolve) 89 | child.kill(undefined, { forceKillAfterTimeout: 1000 }) 90 | } 91 | }) 92 | } 93 | -------------------------------------------------------------------------------- /test/response.test.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable unicorn/no-await-expression-member */ 2 | import { serveTailwindCss } from "../src/main" 3 | 4 | const currentEnvironment = process.env.NODE_ENV 5 | 6 | defineTests("development") 7 | defineTests("production") 8 | 9 | function defineTests(nodeEnvironment: "development" | "production") { 10 | beforeEach(() => { 11 | process.env.NODE_ENV = nodeEnvironment 12 | }) 13 | 14 | afterEach(() => { 15 | process.env.NODE_ENV = currentEnvironment 16 | }) 17 | 18 | test(`serving default css in ${nodeEnvironment}`, async () => { 19 | // test multiple times just to be sure 20 | expect(await (await serveTailwindCss()).text()).toMatchSnapshot() 21 | expect(await (await serveTailwindCss()).text()).toMatchSnapshot() 22 | }) 23 | 24 | test(`serving custom css in ${nodeEnvironment}`, async () => { 25 | expect( 26 | await (await serveTailwindCss("test/fixtures/tailwind.css")).text(), 27 | ).toMatchSnapshot() 28 | expect( 29 | await (await serveTailwindCss("test/fixtures/tailwind.css")).text(), 30 | ).toMatchSnapshot() 31 | }) 32 | } 33 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@itsmapleleaf/configs/tsconfig.base", 3 | "exclude": ["**/node_modules/**", "**/dist/**", "**/test/fixtures/**"] 4 | } 5 | --------------------------------------------------------------------------------