Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit bc206f4

Browse files
nisarhassan12nisarhassan12
committed
setup tailwind.
1 parent d2e6223 commit bc206f4

File tree

8 files changed

+505
-192
lines changed

8 files changed

+505
-192
lines changed

‎.babelrc

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,20 @@
88
"node": "6.10.3"
99
}
1010
}
11+
],
12+
[
13+
"babel-preset-gatsby",
14+
{
15+
"targets": {
16+
"browsers": [">0.25%", "not dead"]
17+
}
18+
}
1119
]
1220
],
1321
"plugins": [
1422
"@babel/plugin-proposal-class-properties",
1523
"@babel/plugin-transform-object-assign",
16-
"@babel/plugin-proposal-object-rest-spread"
24+
"@babel/plugin-proposal-object-rest-spread",
25+
"babel-plugin-macros"
1726
]
1827
}

‎.gitpod.yml

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,23 @@ vscode:
1212
- [email protected]:7hF8G3VtB+HNearI5Zw+NA==
1313
- [email protected]:YnjK47pXScU3DMFfQzkkOw==
1414

15+
- [email protected]:Z6ktluLCqwxpOSSVZcyWvQ==
16+
1517
github:
1618
prebuilds:
1719
# enable for the master/default branch (defaults to true)
1820
master: true
19-
# enable for all branches in this repo (defaults to false)
21+
# enable for all branches in this repo (defaults to false)
2022
branches: true
21-
# enable for pull requests coming from this repo (defaults to true)
23+
# enable for pull requests coming from this repo (defaults to true)
2224
pullRequests: true
23-
# enable for pull requests coming from forks (defaults to false)
25+
# enable for pull requests coming from forks (defaults to false)
2426
pullRequestsFromForks: true
25-
# add a check to pull requests (defaults to true)
27+
# add a check to pull requests (defaults to true)
2628
addCheck: true
27-
# add a "Review in Gitpod" button as a comment to pull requests (defaults to false)
29+
# add a "Review in Gitpod" button as a comment to pull requests (defaults to false)
2830
addComment: false
29-
# add a "Review in Gitpod" button to the pull request's description (defaults to false)
31+
# add a "Review in Gitpod" button to the pull request's description (defaults to false)
3032
addBadge: false
31-
# add a label once the prebuild is ready to pull requests (defaults to false)
33+
# add a label once the prebuild is ready to pull requests (defaults to false)
3234
addLabel: false

‎gatsby-browser.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
import "tailwindcss/dist/base.min.css";
12
require("prismjs/themes/prism-solarizedlight.css");

‎package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
},
2424
"dependencies": {
2525
"@emotion/core": "^10.0.28",
26-
"@emotion/styled": "^10.0.27",
26+
"@emotion/styled": "^11.1.5",
2727
"@sendgrid/mail": "^7.2.6",
2828
"babel-plugin-styled-components": "^1.10.7",
2929
"bowser": "^2.9.0",
@@ -35,7 +35,7 @@
3535
"gatsby-plugin-algolia-docsearch": "^1.0.5",
3636
"gatsby-plugin-canonical-urls": "^2.3.2",
3737
"gatsby-plugin-catch-links": "^2.3.3",
38-
"gatsby-plugin-emotion": "^4.3.2",
38+
"gatsby-plugin-emotion": "^6.1.0",
3939
"gatsby-plugin-exclude": "^1.0.2",
4040
"gatsby-plugin-feed": "^2.5.3",
4141
"gatsby-plugin-google-analytics": "^2.3.2",
@@ -68,6 +68,7 @@
6868
"typescript": "^3.9.3"
6969
},
7070
"devDependencies": {
71+
"@emotion/react": "^11.1.5",
7172
"@types/aws-lambda": "^8.10.63",
7273
"@types/classnames": "^2.2.10",
7374
"@types/node": "^14.0.6",
@@ -79,9 +80,11 @@
7980
"netlify-lambda": "^2.0.1",
8081
"prettier": "^2.0.5",
8182
"rimraf": "^3.0.2",
83+
"tailwindcss": "^2.0.3",
8284
"tslint": "^6.1.2",
8385
"tslint-config-blvd": "^1.2.1",
8486
"tslint-config-prettier": "^1.18.0",
85-
"tslint-plugin-prettier": "^2.3.0"
87+
"tslint-plugin-prettier": "^2.3.0",
88+
"twin.macro": "^2.3.0"
8689
}
8790
}

‎plugins/gatsby-remark-gitpod/package-lock.json

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

‎src/pages/index.tsx

Lines changed: 16 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,19 @@
1-
import React from 'react'
2-
3-
import IndexLayout from '../layouts/index'
4-
import Banner from '../components/index/Banner'
5-
import TrustedBy from '../components/TrustedBy'
6-
import SaveHours from '../components/index/SaveHours'
7-
import FeatureCards from '../components/FeatureCards'
8-
import Testimonials from '../components/index/Testimonials'
9-
import GetStarted from '../components/index/GetStarted'
10-
import MoreInfo from '../components/MoreInfo'
11-
// import Gatsby from '../resources/gatsby.svg'
12-
import GitLab from '../resources/gitlab-logo.svg'
13-
import FreeCodeCamp from '../resources/freecodecamp.svg'
14-
import DWaveLogo from '../resources/dwave.svg'
15-
import GoogleLogo from '../resources/google.svg'
16-
import OpenAILogo from '../resources/openai.svg'
17-
import SauceLabsLogo from '../resources/sauce-labs.svg'
18-
import FacebookLogo from '../resources/facebook.svg'
19-
import CodeInstituteLogo from '../resources/code.svg'
20-
import FourGeeksAcademyLogo from '../resources/4-geeks-academy.png'
21-
import TheiaIDELogo from '../resources/theia-grey.svg'
22-
// import VueLogo from '../resources/vuejs.svg'
23-
import UberLogo from '../resources/uber.svg'
24-
import AmazonLogo from '../resources/amazon.svg'
25-
import IntelLogo from '../resources/intel.svg'
26-
import { features } from '../contents/index'
27-
import SecurityAndOSS from '../components/index/SecurityAndOSS'
28-
// import ProductivityWithGitpod from '../components/index/ProductivityWithGitpod'
29-
30-
const IndexPage: React.SFC<{}> = () => (
31-
<IndexLayout canonical="/">
32-
<Banner />
33-
34-
<TrustedBy
35-
title={<>Trusted by <strong>Visionary Teams</strong></>}
36-
brands={[
37-
{
38-
alt: 'GitLab',
39-
url: 'https://about.gitlab.com/',
40-
svg: GitLab,
41-
className: 'grey-logo'
42-
},
43-
{
44-
alt: 'freeCodeCamp',
45-
url: 'https://www.freecodecamp.org/',
46-
svg: FreeCodeCamp,
47-
className: 'fcc'
48-
},
49-
{
50-
alt: 'D-Wave',
51-
url: 'https://www.dwavesys.com/',
52-
svg: DWaveLogo,
53-
transform: 'scale(1.3)',
54-
className: 'dwave-logo'
55-
},
56-
{
57-
alt: 'Google',
58-
url: 'https://about.google/',
59-
svg: GoogleLogo,
60-
transform: 'scale(0.9)',
61-
className: 'grey-logo'
62-
},
63-
{
64-
alt: 'Amazon',
65-
url: 'https://www.aboutamazon.com',
66-
svg: AmazonLogo,
67-
transform: 'scale(0.9) translateY(5px)',
68-
className: 'grey-logo'
69-
},
70-
{
71-
alt: 'Facebook',
72-
url: 'https://about.fb.com/',
73-
svg: FacebookLogo,
74-
className: 'grey-logo'
75-
},
76-
{
77-
alt: 'Uber',
78-
url: 'https://www.uber.com',
79-
svg: UberLogo,
80-
className: 'grey-logo'
81-
},
82-
{
83-
alt: 'OpenAI',
84-
url: 'https://openai.com/',
85-
svg: OpenAILogo,
86-
transform: 'scale(1.1)',
87-
className: 'grey-logo'
88-
},
89-
{
90-
alt: 'Sauce Labs',
91-
url: 'https://saucelabs.com/',
92-
svg: SauceLabsLogo,
93-
className: 'grey-logo'
94-
},
95-
{
96-
alt: 'Intel',
97-
url: 'https://www.intel.com',
98-
svg: IntelLogo,
99-
transform: 'scale(0.8)',
100-
className: 'grey-logo'
101-
},
102-
{
103-
alt: 'Eclipse Theia',
104-
url: 'https://theia-ide.org',
105-
svg: TheiaIDELogo,
106-
transform: 'scale(1.1)',
107-
className: 'grey-logo'
108-
},
109-
{
110-
alt: 'Code Institute',
111-
url: 'https://codeinstitute.net/',
112-
svg: CodeInstituteLogo,
113-
className: 'grey-logo'
114-
},
115-
{
116-
alt: '4Geeks Academy',
117-
url: 'https://www.4geeksacademy.co/',
118-
svg: FourGeeksAcademyLogo,
119-
className: 'four-geeks grey-logo'
120-
}
121-
// {
122-
// alt: 'Gatsby',
123-
// url: 'https://www.gatsbyjs.org/',
124-
// svg: Gatsby,
125-
// className: 'gatsby-logo'
126-
// },
127-
// {
128-
// alt: 'Vue.js',
129-
// url: 'https://vuejs.org/',
130-
// svg: VueLogo,
131-
// className: 'vue-logo'
132-
// },
133-
]}
134-
/>
135-
136-
{/* <ProductivityWithGitpod /> */}
137-
138-
<SaveHours />
139-
140-
<FeatureCards features={features} />
141-
142-
<Testimonials />
143-
144-
<GetStarted />
145-
146-
<SecurityAndOSS />
147-
148-
<MoreInfo
149-
backgroundShouldBeWhite={true}
150-
negativeSpaceTop={`-11rem`}
151-
/>
152-
</IndexLayout>
1+
import React from 'react';
2+
3+
import tw from "twin.macro";
4+
5+
const Button = tw.button`
6+
bg-blue-500
7+
hover:bg-blue-800
8+
text-white
9+
p-2
10+
rounded
11+
`
12+
13+
const IndexPage = () => (
14+
<>
15+
<Button>A Nice Button</Button>
16+
</>
15317
)
15418

155-
15619
export default IndexPage

‎tailwind.config.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
purge: [],
3+
darkMode: false, // or 'media' or 'class'
4+
theme: {
5+
extend: {},
6+
},
7+
variants: {
8+
extend: {},
9+
},
10+
plugins: [],
11+
}

0 commit comments

Comments
 (0)