Skip to content

Commit 660f6a5

Browse files
hannanhafeezhannanhafeez
committed
Tailwind config added!
Signed-off-by: Hannan Hafeez <[email protected]>
1 parent e4f45da commit 660f6a5

File tree

7 files changed

+406
-112
lines changed

7 files changed

+406
-112
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ yarn dev
1212

1313
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
1414

15-
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
15+
You can start editing the page by modifying `src/pages/index.page.tsx`. The page auto-updates as you edit the file.
1616

17-
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
17+
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `src/pages/api/hello.api.ts`.
1818

19-
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
19+
The `src/pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
2020

2121
## Learn More
2222

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,15 @@
2727
"@types/node": "16.11.11",
2828
"@types/react": "17.0.37",
2929
"@types/react-native": "^0.67.1",
30+
"autoprefixer": "^10.4.12",
3031
"babel-preset-expo": "^8.5.1",
3132
"eslint": "7",
3233
"eslint-config-next": "12.0.4",
3334
"next-compose-plugins": "^2.2.1",
3435
"next-fonts": "^1.5.1",
3536
"next-transpile-modules": "^9.0.0",
37+
"postcss": "^8.4.17",
38+
"tailwindcss": "^3.1.8",
3639
"typescript": "4.5.2"
3740
}
3841
}

‎postcss.config.js

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

‎src/pages/index.page.tsx

+103-103
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import React from "react";
22
import {
3-
Center,
4-
useColorMode,
5-
Tooltip,
6-
IconButton,
7-
SunIcon,
8-
MoonIcon,
9-
Image,
10-
HStack,
11-
Text,
12-
Heading,
13-
Box,
14-
Link,
15-
VStack,
16-
Button,
17-
AspectRatio,
3+
Center,
4+
useColorMode,
5+
Tooltip,
6+
IconButton,
7+
SunIcon,
8+
MoonIcon,
9+
Image,
10+
HStack,
11+
Text,
12+
Heading,
13+
Box,
14+
Link,
15+
VStack,
16+
Button,
17+
AspectRatio,
1818
} from "native-base";
1919

2020
import ExportedImage from "next-image-export-optimizer";
@@ -23,95 +23,95 @@ import NextJsImage from '../../public/images/nextjs-logo.png'
2323

2424
// Start editing here, save and see your changes.
2525
export default function App() {
26-
return (
27-
<Center
28-
flex={1}
29-
_dark={{ bg: "blueGray.900" }}
30-
_light={{ bg: "blueGray.50" }}
31-
>
32-
<VStack alignItems="center" space="md">
33-
<HStack alignItems="center" space="2xl">
34-
<AspectRatio w={24} ratio={1.66}>
35-
{/* <Image
36-
source={{ uri: "images/nextjs-logo.png" }}
37-
alt="NextJS Logo"
38-
resizeMode="contain"
39-
/> */}
40-
<div style={{height: '100%', width:'100%'}}>
41-
<ExportedImage alt='abc' src={NextJsImage} layout='fill' objectFit="contain"/>
42-
</div>
43-
</AspectRatio>
44-
<Text fontSize="4xl">+</Text>
45-
<Image
46-
source={{ uri: "images/nativebase-logo.svg" }}
47-
alt="NativeBase Logo"
48-
size={24}
49-
resizeMode="contain"
50-
/>
51-
</HStack>
52-
<Heading>Welcome to NativeBase</Heading>
53-
<Text>
54-
Edit{" "}
55-
<Box
56-
_text={{
57-
fontFamily: "monospace",
58-
fontSize: "sm",
59-
}}
60-
px={2}
61-
py={1}
62-
_dark={{ bg: "blueGray.800" }}
63-
_light={{ bg: "blueGray.200" }}
64-
>
65-
src/pages/index.js
66-
</Box>{" "}
67-
and save to reload.
68-
</Text>
69-
<HStack alignItems="center" space="sm">
70-
<Link href="https://nextjs.org/docs/getting-started" isExternal>
71-
<Text
72-
_light={{ color: "gray.700" }}
73-
_dark={{ color: "gray.400" }}
74-
underline
75-
fontSize={"xl"}
76-
>
77-
Learn NextJS
78-
</Text>
79-
</Link>
80-
<Text>/</Text>
81-
<Link href="https://docs.nativebase.io" isExternal>
82-
<Text color="primary.500" underline fontSize={"xl"}>
83-
Learn NativeBase
84-
</Text>
85-
</Link>
86-
</HStack>
87-
</VStack>
88-
<ColorModeSwitch />
89-
<Link mt="6" href="https://docs.nativebase.io" isExternal>
90-
<Button variant="outline" colorScheme="coolGray">
91-
View Repo
92-
</Button>
93-
</Link>
94-
</Center>
95-
);
26+
return (
27+
<Center
28+
flex={1}
29+
_dark={{ bg: "blueGray.900" }}
30+
_light={{ bg: "blueGray.50" }}
31+
>
32+
<VStack alignItems="center" space="md">
33+
<HStack alignItems="center" space="2xl">
34+
<AspectRatio w={24} ratio={1.66}>
35+
{/* <Image
36+
source={{ uri: "images/nextjs-logo.png" }}
37+
alt="NextJS Logo"
38+
resizeMode="contain"
39+
/> */}
40+
<div className='w-full h-full'>
41+
<ExportedImage alt='abc' src={NextJsImage} layout='fill' objectFit="contain"/>
42+
</div>
43+
</AspectRatio>
44+
<Text fontSize="4xl">+</Text>
45+
<Image
46+
source={{ uri: "images/nativebase-logo.svg" }}
47+
alt="NativeBase Logo"
48+
size={24}
49+
resizeMode="contain"
50+
/>
51+
</HStack>
52+
<Heading>Welcome to NativeBase</Heading>
53+
<Text>
54+
Edit{" "}
55+
<Box
56+
_text={{
57+
fontFamily: "monospace",
58+
fontSize: "sm",
59+
}}
60+
px={2}
61+
py={1}
62+
_dark={{ bg: "blueGray.800" }}
63+
_light={{ bg: "blueGray.200" }}
64+
>
65+
src/pages/index.js
66+
</Box>{" "}
67+
and save to reload.
68+
</Text>
69+
<HStack alignItems="center" space="sm">
70+
<Link href="https://nextjs.org/docs/getting-started" isExternal>
71+
<Text
72+
_light={{ color: "gray.700" }}
73+
_dark={{ color: "gray.400" }}
74+
underline
75+
fontSize={"xl"}
76+
>
77+
Learn NextJS
78+
</Text>
79+
</Link>
80+
<Text>/</Text>
81+
<Link href="https://docs.nativebase.io" isExternal>
82+
<Text color="primary.500" underline fontSize={"xl"}>
83+
Learn NativeBase
84+
</Text>
85+
</Link>
86+
</HStack>
87+
</VStack>
88+
<ColorModeSwitch />
89+
<Link mt="6" href="https://docs.nativebase.io" isExternal>
90+
<Button variant="outline" colorScheme="coolGray">
91+
View Repo
92+
</Button>
93+
</Link>
94+
</Center>
95+
);
9696
}
9797
// Color Switch Component
9898
function ColorModeSwitch() {
99-
const { colorMode, toggleColorMode } = useColorMode();
100-
return (
101-
<Tooltip
102-
label={colorMode === "dark" ? "Enable light mode" : "Enable dark mode"}
103-
placement="bottom right"
104-
openDelay={300}
105-
closeOnClick={false}
106-
>
107-
<IconButton
108-
position="absolute"
109-
top={12}
110-
right={8}
111-
onPress={toggleColorMode}
112-
icon={colorMode === "dark" ? <SunIcon /> : <MoonIcon />}
113-
accessibilityLabel="Color Mode Switch"
114-
/>
115-
</Tooltip>
116-
);
99+
const { colorMode, toggleColorMode } = useColorMode();
100+
return (
101+
<Tooltip
102+
label={colorMode === "dark" ? "Enable light mode" : "Enable dark mode"}
103+
placement="bottom right"
104+
openDelay={300}
105+
closeOnClick={false}
106+
>
107+
<IconButton
108+
position="absolute"
109+
top={12}
110+
right={8}
111+
onPress={toggleColorMode}
112+
icon={colorMode === "dark" ? <SunIcon /> : <MoonIcon />}
113+
accessibilityLabel="Color Mode Switch"
114+
/>
115+
</Tooltip>
116+
);
117117
}

‎src/styles/globals.css

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
15
html,
26
body {
37
padding: 0;

‎tailwind.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
"./src/pages/**/*.{js,ts,jsx,tsx}",
5+
"./src/components/**/*.{js,ts,jsx,tsx}",
6+
],
7+
theme: {
8+
extend: {},
9+
},
10+
plugins: [],
11+
}

0 commit comments

Comments
 (0)