Skip to content

Commit 6f9ee5a

Browse files
simeonoffsimeonoff
authored
Merge pull request #1018 from IgniteUI/didimmova/add-tailwind-sample
feat(tailwind): add tailwind sample
2 parents f5a2a17 + 3a5e62c commit 6f9ee5a

File tree

14 files changed

+5099
-2477
lines changed

14 files changed

+5099
-2477
lines changed

‎package-lock.json‎

Lines changed: 4725 additions & 2457 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -43,25 +43,10 @@
4343
"dompurify": "^3.2.6",
4444
"file-saver": "^2.0.2",
4545
"igniteui-dockmanager": "1.16.0",
46-
"igniteui-webcomponents": "^6.3.1",
47-
"igniteui-webcomponents-charts": "6.2.1",
48-
"igniteui-webcomponents-core": "6.2.1",
49-
"igniteui-webcomponents-dashboards": "6.2.1",
50-
"igniteui-webcomponents-data-grids": "6.2.1",
51-
"igniteui-webcomponents-datasources": "6.2.1",
52-
"igniteui-webcomponents-excel": "6.2.1",
53-
"igniteui-webcomponents-gauges": "6.2.1",
54-
"igniteui-webcomponents-grids": "6.2.0",
55-
"igniteui-webcomponents-inputs": "6.2.1",
56-
"igniteui-webcomponents-layouts": "6.2.1",
57-
"igniteui-webcomponents-maps": "6.2.1",
58-
"igniteui-webcomponents-spreadsheet": "6.2.1",
59-
"igniteui-webcomponents-spreadsheet-chart-adapter": "6.2.1",
46+
"igniteui-theming": "19.1.1",
6047
"lit": "^3.2.0",
61-
"lit-html": "^3.3.1",
62-
"marked": "^16.3.0",
63-
"marked-shiki": "^1.2.0",
64-
"shiki": "^3.0.0"
48+
"postcss": "^8.5.6",
49+
"tailwindcss": "^4.1.11"
6550
},
6651
"devDependencies": {
6752
"@babel/cli": "^7.28.3",
@@ -71,6 +56,7 @@
7156
"@babel/plugin-transform-runtime": "^7.28.3",
7257
"@babel/preset-env": "^7.28.3",
7358
"@babel/preset-typescript": "^7.27.1",
59+
"@tailwindcss/postcss": "^4.1.11",
7460
"@types/jasmine": "^2.5.53",
7561
"babel-loader": "^10.0.0",
7662
"babel-plugin-transform-custom-element-classes": "^0.1.0",
@@ -90,13 +76,32 @@
9076
"gulp-flatten": "^0.4.0",
9177
"html-loader": "^4.2.0",
9278
"html-webpack-plugin": "^5.6.4",
79+
"igniteui-webcomponents": "^6.3.1",
80+
"igniteui-webcomponents-charts": "6.2.1",
81+
"igniteui-webcomponents-core": "6.2.1",
82+
"igniteui-webcomponents-dashboards": "6.2.1",
83+
"igniteui-webcomponents-data-grids": "6.2.1",
84+
"igniteui-webcomponents-datasources": "6.2.1",
85+
"igniteui-webcomponents-excel": "6.2.1",
86+
"igniteui-webcomponents-gauges": "6.2.1",
87+
"igniteui-webcomponents-grids": "6.2.0",
88+
"igniteui-webcomponents-inputs": "6.2.1",
89+
"igniteui-webcomponents-layouts": "6.2.1",
90+
"igniteui-webcomponents-maps": "6.2.1",
91+
"igniteui-webcomponents-spreadsheet": "6.2.1",
92+
"igniteui-webcomponents-spreadsheet-chart-adapter": "6.2.1",
9393
"jasmine": "^4.5.0",
9494
"jasmine-core": "^4.5.0",
9595
"karma": "^6.4.1",
9696
"karma-chrome-launcher": "^3.1.1",
9797
"karma-jasmine": "^5.1.0",
9898
"karma-spec-reporter": "0.0.34",
99+
"lit-html": "^3.3.1",
100+
"marked": "^16.3.0",
101+
"marked-shiki": "^1.2.0",
102+
"postcss-loader": "^8.1.1",
99103
"rimraf": "^2.6.1",
104+
"shiki": "^3.0.0",
100105
"source-map-loader": "^0.2.1",
101106
"style-loader": "^4.0.0",
102107
"through2": "^4.0.2",

‎postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
plugins: {
3+
"@tailwindcss/postcss": {},
4+
}
5+
}

‎samples/layouts/tailwind/styling/.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 250,
3+
"tabWidth": 4,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": false,
7+
"trailingComma": "none",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"fluid": false
11+
}

‎samples/layouts/tailwind/styling/ReadMe.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
3+
4+
This folder contains implementation of Web Components application with example of Styling feature using [Tailwind](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
10+
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
11+
</a>
12+
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
13+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/layouts/tailwind/styling" rel="noopener noreferrer">
16+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/layouts/tailwind/styling?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
19+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
27+
28+
## Instructions
29+
30+
To set up this project locally, execute these commands:
31+
32+
```
33+
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
34+
git checkout master
35+
cd ./igniteui-wc-examples
36+
cd ./samples/layouts/tailwind/styling
37+
```
38+
39+
open above folder in VS Code or type:
40+
```
41+
code .
42+
```
43+
44+
In terminal window, run:
45+
46+
```
47+
npm install
48+
npm run start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).

‎samples/layouts/tailwind/styling/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Tailwind Styling</title>
5+
<meta charset="UTF-8" />
6+
7+
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
11+
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
12+
<link rel="stylesheet" href="./src/index.css">
13+
</head>
14+
15+
<body>
16+
<div id="root">
17+
<main class="text-base grid surface-500 px-6 py-6">
18+
<div class="font-ig place-content-center text-center shadow-elevation-8 py-8">
19+
<p class="type-style-body-1 text-primary-600">404</p>
20+
<h1 class="type-style-h1 text-gray-900">Page not found</h1>
21+
<p class="type-style-body-1 text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
22+
<div class="mt-10 flex items-center justify-center gap-x-6">
23+
<a href="#" class="type-style-button rounded-md bg-primary-500 text-primary-500-contrast px-3.5 py-2.5 shadow-elevation-2 hover:bg-primary-600 transition duration-150 ease-in-out">Go back home</a>
24+
<a href="#" class="type-style-button text-gray-900 hover:text-primary-600 transition duration-150 ease-in-out">Contact support <span aria-hidden="true">&rarr;</span></a>
25+
</div>
26+
</div>
27+
</main>
28+
</div>
29+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
30+
<% if (false) { %><script src="src/index.ts"></script><% } %>
31+
32+
</body>
33+
</html>

‎samples/layouts/tailwind/styling/package.json‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{
2+
"name": "wc-tabs-overview",
3+
"version": "1.0.0",
4+
"description": "This project provides example of Tabs overview using IgniteUI for Web Components",
5+
"main": "src/index.ts",
6+
"scripts": {
7+
"build": "npm run build:prod",
8+
"build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
9+
"build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
10+
"serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
11+
"serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
12+
"start": "npm run serve:dev",
13+
"build:legacy": "npm run build:prod:legacy",
14+
"build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
15+
"build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
16+
"serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
17+
"serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
18+
"start:legacy": "npm run serve:dev:legacy"
19+
},
20+
"author": "Infragistics",
21+
"dependencies": {
22+
"@webcomponents/custom-elements": "^1.4.1",
23+
"@webcomponents/template": "^1.4.2",
24+
"babel-runtime": "^6.26.0",
25+
"core-js": "^3.6.5",
26+
"igniteui-theming": "19.1.1",
27+
"igniteui-webcomponents": "6.1.0",
28+
"lit": "^3.2.0",
29+
"lit-html": "^3.2.0",
30+
"postcss": "^8.5.6",
31+
"tailwindcss": "^4.1.11",
32+
"tslib": "^2.0.0"
33+
},
34+
"devDependencies": {
35+
"@babel/cli": "^7.8.3",
36+
"@babel/core": "^7.8.3",
37+
"@babel/plugin-proposal-class-properties": "^7.8.3",
38+
"@babel/plugin-transform-runtime": "^7.10.0",
39+
"@babel/preset-env": "^7.8.3",
40+
"@babel/preset-typescript": "^7.8.3",
41+
"@tailwindcss/postcss": "^4.1.11",
42+
"@types/source-map": "^0.5.7",
43+
"autoprefixer": "^10.4.21",
44+
"babel-loader": "^8.1.0",
45+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
46+
"css-loader": "^1.0.0",
47+
"csv-loader": "^3.0.2",
48+
"file-loader": "^4.2.0",
49+
"fork-ts-checker-webpack-plugin": "^4.1.5",
50+
"html-webpack-plugin": "^4.3.0",
51+
"install": "^0.13.0",
52+
"npm": "^11.4.2",
53+
"parcel-bundler": "^1.6.1",
54+
"postcss-loader": "^8.1.1",
55+
"source-map": "^0.7.3",
56+
"style-loader": "^0.22.1",
57+
"tsconfig-paths-webpack-plugin": "^4.0.0",
58+
"typescript": "^4.4.4",
59+
"webpack": "^5.96.1",
60+
"webpack-cli": "^4.10.0",
61+
"webpack-dev-server": "^4.11.1",
62+
"worker-loader": "^3.0.8",
63+
"xml-loader": "^1.2.1"
64+
},
65+
"license": "",
66+
"homepage": "."
67+
}

‎samples/layouts/tailwind/styling/postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
plugins: {
3+
"@tailwindcss/postcss": {},
4+
}
5+
}

‎samples/layouts/tailwind/styling/sandbox.config.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser",
5+
"template": "parcel"
6+
}
7+

‎samples/layouts/tailwind/styling/src/index.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* shared styles are loaded from: */
2+
/* https://static.infragistics.com/xplatform/css/samples */
3+
@import "tailwindcss";
4+
@import "igniteui-theming/tailwind/theme";
5+
@import "igniteui-theming/tailwind/presets/bootstrap-light";
6+
7+
main {
8+
width: 800px;
9+
height: 300px;
10+
margin: 50px auto;
11+
}

0 commit comments

Comments
 (0)