卢阳 / front_backend_zImage

Go to a project
Toggle navigation Toggle navigation pinning
ly0303521
f83d0077 1 parent a0836bca

将tailwindcss、postcss 和 autoprefixer安装到项目中，提高页面加载速度

Inline Side-by-side
Showing 7 changed files with 119 additions and 47 deletions
  1 +@tailwind base;
  2 +@tailwind components;
  3 +@tailwind utilities;
  4 +
  5 +/* Hide scrollbar for Chrome, Safari and Opera */
  6 +.no-scrollbar::-webkit-scrollbar {
  7 + display: none;
  8 +}
  9 +/* Hide scrollbar for IE, Edge and Firefox */
  10 +.no-scrollbar {
  11 + -ms-overflow-style: none; /* IE and Edge */
  12 + scrollbar-width: none; /* Firefox */
  13 +}
@@ -5,49 +5,6 @@ @@ -5,49 +5,6 @@
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Z-Image Generator</title> 6 <title>Z-Image Generator</title>
7 <script src="/config.js"></script> 7 <script src="/config.js"></script>
8 - <script src="https://cdn.tailwindcss.com"></script>  
9 - <script>  
10 - tailwind.config = {  
11 - theme: {  
12 - extend: {  
13 - fontFamily: {  
14 - sans: ['Inter', 'sans-serif'],  
15 - },  
16 - animation: {  
17 - 'fade-in': 'fadeIn 0.5s ease-out',  
18 - },  
19 - keyframes: {  
20 - fadeIn: {  
21 - '0%': { opacity: '0', transform: 'translateY(10px)' },  
22 - '100%': { opacity: '1', transform: 'translateY(0)' },  
23 - },  
24 - },  
25 - },  
26 - },  
27 - }  
28 - </script>  
29 - <style>  
30 - /* Hide scrollbar for Chrome, Safari and Opera */  
31 - .no-scrollbar::-webkit-scrollbar {  
32 - display: none;  
33 - }  
34 - /* Hide scrollbar for IE, Edge and Firefox */  
35 - .no-scrollbar {  
36 - -ms-overflow-style: none; /* IE and Edge */  
37 - scrollbar-width: none; /* Firefox */  
38 - }  
39 - </style>  
40 - <script type="importmap">  
41 -{  
42 - "imports": {  
43 - "lucide-react": "https://esm.sh/lucide-react@^0.561.0",  
44 - "react/": "https://esm.sh/react@^19.2.3/",  
45 - "react": "https://esm.sh/react@^19.2.3",  
46 - "react-dom/": "https://esm.sh/react-dom@^19.2.3/"  
47 - }  
48 -}  
49 -</script>  
50 -<link rel="stylesheet" href="/index.css">  
51 </head> 8 </head>
52 <body class="bg-gray-50 text-gray-900 antialiased"> 9 <body class="bg-gray-50 text-gray-900 antialiased">
53 <div id="root"></div> 10 <div id="root"></div>
1 import React from 'react'; 1 import React from 'react';
2 import ReactDOM from 'react-dom/client'; 2 import ReactDOM from 'react-dom/client';
3 import App from './App'; 3 import App from './App';
  4 +import './index.css';
4 5
5 const rootElement = document.getElementById('root'); 6 const rootElement = document.getElementById('root');
6 if (!rootElement) { 7 if (!rootElement) {
@@ -15,6 +15,9 @@ @@ -15,6 +15,9 @@
15 "devDependencies": { 15 "devDependencies": {
16 "@types/node": "^22.14.0", 16 "@types/node": "^22.14.0",
17 "@vitejs/plugin-react": "^5.0.0", 17 "@vitejs/plugin-react": "^5.0.0",
  18 + "autoprefixer": "^10.4.24",
  19 + "postcss": "^8.5.6",
  20 + "tailwindcss": "^4.1.18",
18 "typescript": "~5.8.2", 21 "typescript": "~5.8.2",
19 "vite": "^6.2.0" 22 "vite": "^6.2.0"
20 } 23 }
@@ -1191,6 +1194,43 @@ @@ -1191,6 +1194,43 @@
1191 "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" 1194 "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
1192 } 1195 }
1193 }, 1196 },
  1197 + "node_modules/autoprefixer": {
  1198 + "version": "10.4.24",
  1199 + "resolved": "https://repo.huaweicloud.com/repository/npm/autoprefixer/-/autoprefixer-10.4.24.tgz",
  1200 + "integrity": "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==",
  1201 + "dev": true,
  1202 + "funding": [
  1203 + {
  1204 + "type": "opencollective",
  1205 + "url": "https://opencollective.com/postcss/"
  1206 + },
  1207 + {
  1208 + "type": "tidelift",
  1209 + "url": "https://tidelift.com/funding/github/npm/autoprefixer"
  1210 + },
  1211 + {
  1212 + "type": "github",
  1213 + "url": "https://github.com/sponsors/ai"
  1214 + }
  1215 + ],
  1216 + "license": "MIT",
  1217 + "dependencies": {
  1218 + "browserslist": "^4.28.1",
  1219 + "caniuse-lite": "^1.0.30001766",
  1220 + "fraction.js": "^5.3.4",
  1221 + "picocolors": "^1.1.1",
  1222 + "postcss-value-parser": "^4.2.0"
  1223 + },
  1224 + "bin": {
  1225 + "autoprefixer": "bin/autoprefixer"
  1226 + },
  1227 + "engines": {
  1228 + "node": "^10 || ^12 || >=14"
  1229 + },
  1230 + "peerDependencies": {
  1231 + "postcss": "^8.1.0"
  1232 + }
  1233 + },
1194 "node_modules/baseline-browser-mapping": { 1234 "node_modules/baseline-browser-mapping": {
1195 "version": "2.9.11", 1235 "version": "2.9.11",
1196 "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz", 1236 "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
@@ -1236,9 +1276,9 @@ @@ -1236,9 +1276,9 @@
1236 } 1276 }
1237 }, 1277 },
1238 "node_modules/caniuse-lite": { 1278 "node_modules/caniuse-lite": {
1239 - "version": "1.0.30001761",  
1240 - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001761.tgz",  
1241 - "integrity": "sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g==", 1279 + "version": "1.0.30001767",
  1280 + "resolved": "https://repo.huaweicloud.com/repository/npm/caniuse-lite/-/caniuse-lite-1.0.30001767.tgz",
  1281 + "integrity": "sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ==",
1242 "dev": true, 1282 "dev": true,
1243 "funding": [ 1283 "funding": [
1244 { 1284 {
@@ -1358,6 +1398,20 @@ @@ -1358,6 +1398,20 @@
1358 } 1398 }
1359 } 1399 }
1360 }, 1400 },
  1401 + "node_modules/fraction.js": {
  1402 + "version": "5.3.4",
  1403 + "resolved": "https://repo.huaweicloud.com/repository/npm/fraction.js/-/fraction.js-5.3.4.tgz",
  1404 + "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
  1405 + "dev": true,
  1406 + "license": "MIT",
  1407 + "engines": {
  1408 + "node": "*"
  1409 + },
  1410 + "funding": {
  1411 + "type": "github",
  1412 + "url": "https://github.com/sponsors/rawify"
  1413 + }
  1414 + },
1361 "node_modules/fsevents": { 1415 "node_modules/fsevents": {
1362 "version": "2.3.3", 1416 "version": "2.3.3",
1363 "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", 1417 "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1490,7 +1544,7 @@ @@ -1490,7 +1544,7 @@
1490 }, 1544 },
1491 "node_modules/postcss": { 1545 "node_modules/postcss": {
1492 "version": "8.5.6", 1546 "version": "8.5.6",
1493 - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", 1547 + "resolved": "https://repo.huaweicloud.com/repository/npm/postcss/-/postcss-8.5.6.tgz",
1494 "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", 1548 "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
1495 "dev": true, 1549 "dev": true,
1496 "funding": [ 1550 "funding": [
@@ -1517,6 +1571,13 @@ @@ -1517,6 +1571,13 @@
1517 "node": "^10 || ^12 || >=14" 1571 "node": "^10 || ^12 || >=14"
1518 } 1572 }
1519 }, 1573 },
  1574 + "node_modules/postcss-value-parser": {
  1575 + "version": "4.2.0",
  1576 + "resolved": "https://repo.huaweicloud.com/repository/npm/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
  1577 + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
  1578 + "dev": true,
  1579 + "license": "MIT"
  1580 + },
1520 "node_modules/react": { 1581 "node_modules/react": {
1521 "version": "19.2.3", 1582 "version": "19.2.3",
1522 "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", 1583 "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
@@ -1616,6 +1677,13 @@ @@ -1616,6 +1677,13 @@
1616 "node": ">=0.10.0" 1677 "node": ">=0.10.0"
1617 } 1678 }
1618 }, 1679 },
  1680 + "node_modules/tailwindcss": {
  1681 + "version": "4.1.18",
  1682 + "resolved": "https://repo.huaweicloud.com/repository/npm/tailwindcss/-/tailwindcss-4.1.18.tgz",
  1683 + "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
  1684 + "dev": true,
  1685 + "license": "MIT"
  1686 + },
1619 "node_modules/tinyglobby": { 1687 "node_modules/tinyglobby": {
1620 "version": "0.2.15", 1688 "version": "0.2.15",
1621 "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", 1689 "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -16,6 +16,9 @@ @@ -16,6 +16,9 @@
16 "devDependencies": { 16 "devDependencies": {
17 "@types/node": "^22.14.0", 17 "@types/node": "^22.14.0",
18 "@vitejs/plugin-react": "^5.0.0", 18 "@vitejs/plugin-react": "^5.0.0",
  19 + "autoprefixer": "^10.4.24",
  20 + "postcss": "^8.5.6",
  21 + "tailwindcss": "^4.1.18",
19 "typescript": "~5.8.2", 22 "typescript": "~5.8.2",
20 "vite": "^6.2.0" 23 "vite": "^6.2.0"
21 } 24 }
  1 +export default {
  2 + plugins: {
  3 + tailwindcss: {},
  4 + autoprefixer: {},
  5 + },
  6 +}
  1 +/** @type {import('tailwindcss').Config} */
  2 +export default {
  3 + content: [
  4 + "./index.html",
  5 + "./**/*.{js,ts,jsx,tsx}",
  6 + ],
  7 + theme: {
  8 + extend: {
  9 + fontFamily: {
  10 + sans: ['Inter', 'sans-serif'],
  11 + },
  12 + animation: {
  13 + 'fade-in': 'fadeIn 0.5s ease-out',
  14 + },
  15 + keyframes: {
  16 + fadeIn: {
  17 + '0%': { opacity: '0', transform: 'translateY(10px)' },
  18 + '100%': { opacity: '1', transform: 'translateY(0)' },
  19 + },
  20 + },
  21 + },
  22 + },
  23 + plugins: [],
  24 +}