From 12238dab48f412f37e8d6f00667146cd27f50997 Mon Sep 17 00:00:00 2001 From: Sonia Appasamy Date: Mon, 14 Aug 2023 12:51:59 -0400 Subject: [PATCH] client/web: add tailwind styling to react app Updates tailscale/corp#13775 Signed-off-by: Sonia Appasamy --- client/web/index.html | 1 + client/web/package.json | 8 +++++--- client/web/postcss.config.js | 6 ++++++ client/web/src/components/app.tsx | 2 +- client/web/src/index.css | 3 +++ client/web/tailwind.config.js | 12 +++++++++++ client/web/yarn.lock | 33 ++++++++++++++++++++++++++++--- 7 files changed, 58 insertions(+), 7 deletions(-) create mode 100644 client/web/postcss.config.js create mode 100644 client/web/src/index.css create mode 100644 client/web/tailwind.config.js diff --git a/client/web/index.html b/client/web/index.html index 0c558ac16..854c39a5c 100644 --- a/client/web/index.html +++ b/client/web/index.html @@ -1,3 +1,4 @@ + \ No newline at end of file diff --git a/client/web/package.json b/client/web/package.json index 71c4dbcf4..3486b8d22 100644 --- a/client/web/package.json +++ b/client/web/package.json @@ -15,12 +15,14 @@ "@types/react": "^18.0.20", "@types/react-dom": "^18.0.6", "@vitejs/plugin-react-swc": "^3.3.2", - "tailwindcss": "^3.1.6", + "autoprefixer": "^10.4.15", + "postcss": "^8.4.27", + "tailwindcss": "^3.3.3", "typescript": "^4.7.4", "vite": "^4.3.9", - "vite-tsconfig-paths": "^3.5.0", - "vite-plugin-svgr": "^3.2.0", "vite-plugin-rewrite-all": "^1.0.1", + "vite-plugin-svgr": "^3.2.0", + "vite-tsconfig-paths": "^3.5.0", "vitest": "^0.32.0" }, "scripts": { diff --git a/client/web/postcss.config.js b/client/web/postcss.config.js new file mode 100644 index 000000000..33ad091d2 --- /dev/null +++ b/client/web/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx index 8f9303870..709dc4781 100644 --- a/client/web/src/components/app.tsx +++ b/client/web/src/components/app.tsx @@ -1,5 +1,5 @@ import React from "react" export default function App() { - return
Hello world
+ return
Hello world
} diff --git a/client/web/src/index.css b/client/web/src/index.css new file mode 100644 index 000000000..b5c61c956 --- /dev/null +++ b/client/web/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/client/web/tailwind.config.js b/client/web/tailwind.config.js new file mode 100644 index 000000000..1ec9c51c2 --- /dev/null +++ b/client/web/tailwind.config.js @@ -0,0 +1,12 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: {}, + }, + plugins: [], +} + diff --git a/client/web/yarn.lock b/client/web/yarn.lock index b1f9849af..b3365919c 100644 --- a/client/web/yarn.lock +++ b/client/web/yarn.lock @@ -679,6 +679,18 @@ assertion-error@^1.1.0: resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b" integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw== +autoprefixer@^10.4.15: + version "10.4.15" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.15.tgz#a1230f4aeb3636b89120b34a1f513e2f6834d530" + integrity sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew== + dependencies: + browserslist "^4.21.10" + caniuse-lite "^1.0.30001520" + fraction.js "^4.2.0" + normalize-range "^0.1.2" + picocolors "^1.0.0" + postcss-value-parser "^4.2.0" + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" @@ -704,7 +716,7 @@ braces@^3.0.2, braces@~3.0.2: dependencies: fill-range "^7.0.1" -browserslist@^4.21.9: +browserslist@^4.21.10, browserslist@^4.21.9: version "4.21.10" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0" integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ== @@ -739,6 +751,11 @@ caniuse-lite@^1.0.30001517: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601" integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg== +caniuse-lite@^1.0.30001520: + version "1.0.30001520" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz#62e2b7a1c7b35269594cf296a80bdf8cb9565006" + integrity sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA== + chai@^4.3.7: version "4.3.7" resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.7.tgz#ec63f6df01829088e8bf55fca839bcd464a8ec51" @@ -947,6 +964,11 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +fraction.js@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950" + integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA== + fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" @@ -1226,6 +1248,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0: resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== +normalize-range@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" + integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA== + object-assign@^4.0.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -1360,7 +1387,7 @@ postcss-selector-parser@^6.0.11: cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-value-parser@^4.0.0: +postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== @@ -1545,7 +1572,7 @@ svg-parser@^2.0.4: resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5" integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ== -tailwindcss@^3.1.6: +tailwindcss@^3.3.3: version "3.3.3" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf" integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==