Skip to content

Commit 71f8f4e

Browse files
xNoJusticexNoJustice
authored
Initial commit
0 parents  commit 71f8f4e

15 files changed

+1408
-0
lines changed

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.prettierignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
build/
2+
dist/
3+
node_modules/
4+
package-lock.json
5+
yarn.lock

‎.prettierrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"printWidth": 80,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": false,
6+
"singleQuote": true,
7+
"trailingComma": "all",
8+
"endOfLine": "lf"
9+
}

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 xNoJustice
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.

‎README.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<img alt="React Vite Tailwind Boilerplate" src="" />
2+
3+
# React Vite Tailwind Boilerplate
4+
5+
## Install & Start
6+
7+
⚠️ Using [Yarn Package Manager](https://yarnpkg.com) is recommended over `npm`.
8+
9+
Create React App with the template
10+
11+
```shell
12+
git clone https://github.com/xNoJustice/react-vite-tailwind-boilerplate.git
13+
cd react-vite-tailwind-boilerplate
14+
yarn
15+
yarn dev #dev
16+
yarn prettify #prettify codes
17+
yarn build #prod
18+
```
19+
20+
## License
21+
22+
This project is licensed under the MIT license, Copyright (c) 2023 xNoJustice.
23+
For more information see `LICENSE`.

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

‎package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "react-vite-tailwind-boilerplate",
3+
"version": "1.0.0",
4+
"author": "xNoJustice",
5+
"description": "CRA Vite Template for tailwind, prettier and autopublish on GH pages",
6+
"repository": "https://github.com/xNoJustice/react-vite-tailwind-boilerplate",
7+
"homepage": "https://xnojustice.github.io/react-vite-tailwind-boilerplate",
8+
"keywords": [
9+
"react",
10+
"reactjs",
11+
"react-boilerplate",
12+
"vite",
13+
"tailwindcss",
14+
"tailwind",
15+
"tailwind-css",
16+
"boilerplate"
17+
],
18+
"license": "MIT",
19+
"type": "module",
20+
"scripts": {
21+
"dev": "vite",
22+
"build": "vite build",
23+
"preview": "vite preview",
24+
"prettify": "yarn prettier \"**/*.*(js|jsx)\" --ignore-path=.prettierignore --write"
25+
},
26+
"dependencies": {
27+
"react": "^18.2.0",
28+
"react-dom": "^18.2.0"
29+
},
30+
"devDependencies": {
31+
"@vitejs/plugin-react": "^4.0.0",
32+
"autoprefixer": "^10.4.14",
33+
"postcss": "^8.4.24",
34+
"prettier": "^2.8.8",
35+
"tailwindcss": "^3.3.2",
36+
"vite": "^4.3.9"
37+
}
38+
}

‎postcss.config.cjs

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

‎public/vite.svg

+1
Loading

‎src/App.jsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { useState } from 'react'
2+
3+
function App() {
4+
const [count, setCount] = useState(0)
5+
6+
return (
7+
<div className="flex flex-col items-center justify-center w-full h-screen p-6 mx-auto text-2xl font-bold dark:text-white">
8+
<h1 className="text-3xl font-bold underline">
9+
<span className="relative inline-block before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500">
10+
<span className="relative text-white">Vite</span>
11+
</span>
12+
<span className="relative inline-block ml-5 before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-red-500">
13+
<span className="relative text-white">+</span>
14+
</span>
15+
<span className="relative inline-block ml-5 before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-purple-500">
16+
<span className="relative text-white">React</span>
17+
</span>
18+
</h1>
19+
<button
20+
className="p-2 mt-5 bg-blue-500 border-blue-500 rounded-md"
21+
onClick={() => setCount((count) => count + 1)}
22+
>
23+
count is {count}
24+
</button>
25+
<div className="max-w-lg p-8 mx-auto">
26+
<details
27+
className="p-6 rounded-lg open:bg-white dark:open:bg-slate-900 open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg"
28+
open
29+
>
30+
<summary className="text-sm font-semibold leading-6 select-none text-slate-900 dark:text-white">
31+
React + Vite?
32+
</summary>
33+
<div className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
34+
<p>
35+
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
36+
Molestias iste facilis minus laboriosam accusamus adipisci quaerat
37+
delectus eum quos modi, neque, qui veniam. Nostrum a voluptatibus,
38+
exercitationem magni excepturi explicabo?
39+
</p>
40+
</div>
41+
</details>
42+
</div>
43+
</div>
44+
)
45+
}
46+
47+
export default App

‎src/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎src/main.jsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom/client'
3+
import App from './App'
4+
import './index.css'
5+
6+
ReactDOM.createRoot(document.getElementById('root')).render(
7+
<div className="flex items-center justify-center w-full h-full font-sans scroll-smooth bg-slate-100 dark:bg-slate-900">
8+
<App />
9+
</div>,
10+
)

‎tailwind.config.cjs

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
3+
theme: {
4+
extend: {},
5+
},
6+
plugins: [],
7+
}

‎vite.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [react()],
7+
})

0 commit comments

Comments
 (0)