Skip to content

Commit 12c2a0e

Browse files
Samiur-SiliconOrchardSamiur-SiliconOrchard
committed
tailwind-css & ant-design setup with custom config
1 parent 437d0e8 commit 12c2a0e

File tree

8 files changed

+1578
-8
lines changed

8 files changed

+1578
-8
lines changed

‎package-lock.json‎

Lines changed: 1423 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@ant-design/icons": "^4.7.0",
67
"@testing-library/jest-dom": "^5.16.5",
78
"@testing-library/react": "^13.3.0",
89
"@testing-library/user-event": "^13.5.0",
10+
"antd": "^4.22.5",
911
"react": "^18.2.0",
1012
"react-dom": "^18.2.0",
1113
"react-scripts": "5.0.1",
@@ -36,12 +38,15 @@
3638
]
3739
},
3840
"devDependencies": {
41+
"autoprefixer": "^10.4.8",
3942
"eslint": "^8.22.0",
4043
"eslint-config-airbnb": "^19.0.4",
4144
"eslint-plugin-import": "^2.26.0",
4245
"eslint-plugin-jsx-a11y": "^6.6.1",
4346
"eslint-plugin-react": "^7.30.1",
4447
"eslint-plugin-react-hooks": "^4.6.0",
45-
"prettier": "2.7.1"
48+
"postcss": "^8.4.16",
49+
"prettier": "2.7.1",
50+
"tailwindcss": "^3.1.8"
4651
}
4752
}

‎postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {}
5+
}
6+
};

‎public/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@
2121
work correctly both with client-side routing and a non-root public URL.
2222
Learn how to configure a non-root public URL by running `npm run build`.
2323
-->
24+
25+
<!-- google font's ~ poppins -->
26+
<link rel="preconnect" href="https://fonts.googleapis.com" />
27+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
28+
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,700;0,900;1,200;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
29+
30+
<!-- webpage title -->
2431
<title>React App — Boilerplate</title>
2532
</head>
2633
<body>

‎src/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22

33
function App() {
44
return (
5-
<div>
6-
<h1 style={{ textAlign: 'center' }}>
5+
<div className='min-h-screen bg-gray-gradient'>
6+
<h1 className='text-center text-2xl text-gradient font-bold pt-5'>
77
Welcome! JavaScript React App Boilerplate !!!
88
</h1>
99
</div>

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'antd/dist/antd.min.css';
12
import React from 'react';
23
import ReactDOM from 'react-dom/client';
34
import App from './App';

‎src/styles.css‎

Lines changed: 94 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,100 @@
1+
/*** Tailwind CSS */
2+
@tailwind base;
3+
@tailwind components;
4+
@tailwind utilities;
5+
6+
/*** CSS Variables */
7+
:root {
8+
--black-gradient: linear-gradient(144.39deg, #ffffff -278.56%, #6d6d6d -78.47%, #11101d 91.61%);
9+
--card-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1);
10+
}
11+
12+
/*** CSS Resets */
13+
* {
14+
scroll-behavior: smooth;
15+
}
116
body {
2-
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
17+
font-family: 'Poppins', sans-serif;
418
-webkit-font-smoothing: antialiased;
519
-moz-osx-font-smoothing: grayscale;
620
}
721

8-
code {
9-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
22+
/*** Boilerplate Built-In Gradient Colors Start */
23+
24+
.text-gradient {
25+
background: radial-gradient(64.18% 64.18% at 71.16% 35.69%, #def9fa 0.89%, #bef3f5 17.23%, #9dedf0 42.04%, #7de7eb 55.12%, #5ce1e6 71.54%, #33bbcf 100%);
26+
-webkit-text-fill-color: transparent;
27+
-webkit-background-clip: text;
28+
background-clip: text;
29+
}
30+
31+
.bg-black-gradient {
32+
background: linear-gradient(144.39deg, #ffffff -278.56%, #6d6d6d -78.47%, #11101d 91.61%);
33+
}
34+
.bg-gray-gradient {
35+
background: linear-gradient(153.47deg, rgba(255, 255, 255, 0) -341.94%, #14101d 95.11%);
36+
}
37+
.bg-blue-gradient {
38+
background: linear-gradient(157.81deg, #def9fa -43.27%, #bef3f5 -21.24%, #9dedf0 12.19%, #7de7eb 29.82%, #5ce1e6 51.94%, #33bbcf 90.29%);
39+
}
40+
.bg-discount-gradient {
41+
background: linear-gradient(125.17deg, #272727 0%, #11101d 100%);
42+
}
43+
44+
.blue-gradient {
45+
background: linear-gradient(180deg, rgba(188, 165, 255, 0) 0%, #214d76 100%);
46+
filter: blur(123px);
47+
}
48+
.pink-gradient {
49+
background: linear-gradient(90deg, #f4c4f3 0%, #fc67fa 100%);
50+
filter: blur(900px);
51+
}
52+
.white-gradient {
53+
background: rgba(255, 255, 255, 0.6);
54+
filter: blur(750px);
55+
}
56+
57+
/*** Boilerplate Built-In Gradient Colors End */
58+
59+
/*** Boilerplate Built-In Card Style Start */
60+
61+
.box-shadow {
62+
box-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1);
1063
}
64+
65+
.feedback-card {
66+
background: transparent;
67+
}
68+
69+
.feature-card:hover {
70+
background: var(--black-gradient);
71+
box-shadow: var(--card-shadow);
72+
}
73+
74+
.feedback-container .feedback-card:last-child {
75+
margin-right: 0px;
76+
}
77+
78+
/*** Boilerplate Built-In Card Style End */
79+
80+
/*** And Design Customize Start */
81+
82+
.ant-btn-primary {
83+
@apply text-textColorWhite bg-primaryColor hover:bg-primaryColorHover border-primaryColor hover:border-primaryColorHover !important;
84+
}
85+
86+
.ant-divider-horizontal.ant-divider-with-text-center::before,
87+
.ant-divider-horizontal.ant-divider-with-text-center::after {
88+
border-top: 2px solid !important;
89+
@apply border-primaryColor text-center !important;
90+
}
91+
92+
.ant-message-custom-content {
93+
@apply inline-flex items-center;
94+
}
95+
96+
.ant-popover-title {
97+
@apply bg-backgroundColorBlack;
98+
}
99+
100+
/*** And Design Customize End */

‎tailwind.config.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: ['./src/**/*.{js,jsx,ts,tsx}'],
4+
theme: {
5+
extend: {
6+
screens: {
7+
xs: '480px',
8+
ss: '620px',
9+
sm: '768px',
10+
md: '1060px',
11+
lg: '1200px',
12+
xl: '1700px',
13+
xxl: '1900px'
14+
},
15+
colors: {
16+
primaryColor: '#2563eb',
17+
primaryColorHover: '#1d4ed8',
18+
accentColor: '#e11d48',
19+
accentColorHover: '#be123c',
20+
successColor: '#16a34a',
21+
successColorHover: '#15803d',
22+
warningColor: '#d97706',
23+
warningColorHover: '#b45309',
24+
errorColor: '#dc2626',
25+
errorColorHover: '#b91c1c',
26+
textColorBlack: '#000000',
27+
textColorWhite: '#ffffff',
28+
textColorWhiteHover: '#d1d5db',
29+
backgroundColorWhite: '#ffffff',
30+
backgroundColorGray: '#f5f5f5',
31+
backgroundColorBlack: '#0f172a'
32+
},
33+
fontFamily: {
34+
poppins: ['Poppins', 'sans-serif']
35+
}
36+
}
37+
},
38+
plugins: []
39+
};

0 commit comments

Comments
 (0)