Skip to content

Commit c759981

Browse files
simonswisssimonswiss
committed
initial commit
0 parents  commit c759981

File tree

108 files changed

+11798
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+11798
-0
lines changed

Diff for: ‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
dist/
3+
.DS_Store

Diff for: ‎01-setting-up-tailwindcss/01-cdn-link/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# 01 – Setting Up Tailwind CSS
2+
3+
This example shows how to use Tailwind CSS via a CDN link.

Diff for: ‎01-setting-up-tailwindcss/01-cdn-link/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
8+
</head>
9+
<body>
10+
<h1 class="text-4xl font-bold text-center text-blue-500">Hello World</h1>
11+
</body>
12+
</html>

Diff for: ‎01-setting-up-tailwindcss/02-vite/README.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# 01 - Setting Up Tailwind CSS
2+
3+
This example shows how to setup Tailwind CSS with the [Vite](http://vitejs.dev/) frontend build tool.
4+
5+
## Setup steps
6+
7+
First, install all the required dependencies with `npm`:
8+
9+
```sh
10+
npm install
11+
```
12+
13+
Then, start the Vite dev server with:
14+
15+
```sh
16+
npm run dev
17+
```

Diff for: ‎01-setting-up-tailwindcss/02-vite/css/tailwind.css

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

Diff for: ‎01-setting-up-tailwindcss/02-vite/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link rel="stylesheet" href="/css/tailwind.css" />
8+
</head>
9+
<body>
10+
<h1 class="text-4xl font-bold text-center text-blue-500">Hello World</h1>
11+
</body>
12+
</html>

Diff for: ‎01-setting-up-tailwindcss/02-vite/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "up-and-running",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "vite"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"autoprefixer": "^10.2.3",
14+
"postcss": "^8.2.4",
15+
"tailwindcss": "^2.0.2",
16+
"vite": "^2.0.0-beta.50"
17+
}
18+
}

Diff for: ‎01-setting-up-tailwindcss/02-vite/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+
};

Diff for: ‎01-setting-up-tailwindcss/02-vite/tailwind.config.js

+11
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+
};

Diff for: ‎01-setting-up-tailwindcss/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# 01 – Setting Up Tailwind CSS
2+
3+
[Watch the video on YouTube](https://www.youtube.com/watch?v=qYgogv4R8zg)

Diff for: ‎02-the-utility-first-workflow/README.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# 02 - The Utility-First Workflow
2+
3+
[🎬 Watch the video on YouTube](https://www.youtube.com/watch?v=UvF56fPGVt4)
4+
5+
## Setup steps
6+
7+
First, install all the required dependencies with `npm`:
8+
9+
```sh
10+
npm install
11+
```
12+
13+
Then, start the Vite dev server with:
14+
15+
```sh
16+
npm run dev
17+
```

Diff for: ‎02-the-utility-first-workflow/css/tailwind.css

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

Diff for: ‎02-the-utility-first-workflow/img/beach-work.jpg

639 KB
Loading

Diff for: ‎02-the-utility-first-workflow/img/logo.svg

+5
Loading

Diff for: ‎02-the-utility-first-workflow/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link rel="stylesheet" href="/css/tailwind.css" />
8+
</head>
9+
<body class="bg-gray-100">
10+
<div class="px-8 py-12">
11+
<img class="h-10" src="/img/logo.svg" alt="Workcation" />
12+
<img class="mt-6 rounded-lg shadow-xl" src="/img/beach-work.jpg" alt="Woman workcationing on the beach" />
13+
<h1 class="mt-6 text-2xl font-bold text-gray-900">
14+
You can work from anywhere.
15+
<span class="text-indigo-500">Take advantage of it.</span>
16+
</h1>
17+
<p class="mt-2 text-gray-600">
18+
Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy some nice weather even when you're not on
19+
vacation.
20+
</p>
21+
<div class="mt-4">
22+
<a
23+
class="inline-block px-5 py-3 rounded-lg shadow-lg bg-indigo-500 text-white uppercase tracking-wider font-semibold text-sm"
24+
href="#"
25+
>
26+
Book your escape
27+
</a>
28+
</div>
29+
</div>
30+
</body>
31+
</html>

Diff for: ‎02-the-utility-first-workflow/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "up-and-running",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "vite"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"autoprefixer": "^10.2.3",
14+
"postcss": "^8.2.4",
15+
"tailwindcss": "^2.0.2",
16+
"vite": "^2.0.0-beta.50"
17+
}
18+
}

Diff for: ‎02-the-utility-first-workflow/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+
};

Diff for: ‎02-the-utility-first-workflow/tailwind.config.js

+11
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+
};

Diff for: ‎03-responsive-design/README.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# 3 - Responsive Design
2+
3+
[🎬 Watch the video on YouTube](https://www.youtube.com/watch?v=hX1zUdj4Dw4)
4+
5+
## Setup steps
6+
7+
First, install all the required dependencies with `npm`:
8+
9+
```sh
10+
npm install
11+
```
12+
13+
Then, start the Vite dev server with:
14+
15+
```sh
16+
npm run dev
17+
```

Diff for: ‎03-responsive-design/css/tailwind.css

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

Diff for: ‎03-responsive-design/img/beach-work.jpg

639 KB
Loading

Diff for: ‎03-responsive-design/img/logo.svg

+5
Loading

Diff for: ‎03-responsive-design/index.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link rel="stylesheet" href="/css/tailwind.css" />
8+
</head>
9+
<body class="bg-gray-300">
10+
<div class="bg-gray-100 grid lg:grid-cols-2 2xl:grid-cols-5">
11+
<div class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:px-12 lg:py-24 lg:max-w-full xl:mr-0 2xl:col-span-2">
12+
<div class="xl:max-w-xl">
13+
<img class="h-10" src="/img/logo.svg" alt="Workcation" />
14+
<img
15+
class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full sm:object-cover object-center lg:hidden"
16+
src="/img/beach-work.jpg"
17+
alt="Woman workcationing on the beach"
18+
/>
19+
<h1 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl lg:text-3xl xl:text-4xl">
20+
You can work from anywhere.
21+
<br class="hidden lg:inline" />
22+
<span class="text-indigo-500">Take advantage of it.</span>
23+
</h1>
24+
<p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
25+
Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy some nice weather even when you're not
26+
on vacation.
27+
</p>
28+
<div class="mt-4 sm:mt-6">
29+
<a
30+
class="inline-block px-5 py-3 rounded-lg bg-indigo-500 uppercase tracking-wider font-semibold text-sm text-white shadow-lg sm:text-base"
31+
href="#"
32+
>
33+
Book your escape
34+
</a>
35+
</div>
36+
</div>
37+
</div>
38+
<div class="hidden relative lg:block 2xl:col-span-3">
39+
<img
40+
class="absolute inset-0 w-full h-full object-cover object-center"
41+
src="/img/beach-work.jpg"
42+
alt="Woman workcationing on the beach"
43+
/>
44+
</div>
45+
</div>
46+
</body>
47+
</html>

Diff for: ‎03-responsive-design/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "up-and-running",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "vite"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"autoprefixer": "^10.2.3",
14+
"postcss": "^8.2.4",
15+
"tailwindcss": "^2.0.2",
16+
"vite": "^2.0.0-beta.50"
17+
}
18+
}

Diff for: ‎03-responsive-design/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+
};

Diff for: ‎03-responsive-design/tailwind.config.js

+11
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+
};

Diff for: ‎04-hover-focus-and-other-states/README.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# 04 - Hover, Focus and Other States
2+
3+
[🎬 Watch the video on YouTube](https://www.youtube.com/watch?v=5_BPDve5-3M)
4+
5+
## Setup steps
6+
7+
First, install all the required dependencies with `npm`:
8+
9+
```sh
10+
npm install
11+
```
12+
13+
Then, start the Vite dev server with:
14+
15+
```sh
16+
npm run dev
17+
```

Diff for: ‎04-hover-focus-and-other-states/css/tailwind.css

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

Diff for: ‎04-hover-focus-and-other-states/img/beach-work.jpg

639 KB
Loading

Diff for: ‎04-hover-focus-and-other-states/img/logo.svg

+5
Loading

Diff for: ‎04-hover-focus-and-other-states/index.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link rel="stylesheet" href="/css/tailwind.css" />
8+
</head>
9+
<body class="bg-gray-300">
10+
<div class="bg-gray-100 grid lg:grid-cols-2 2xl:grid-cols-5">
11+
<div class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:px-12 lg:py-24 lg:max-w-full xl:mr-0 2xl:col-span-2">
12+
<div class="xl:max-w-xl">
13+
<img class="h-10" src="/img/logo.svg" alt="Workcation" />
14+
<img
15+
class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full sm:object-cover object-center lg:hidden"
16+
src="/img/beach-work.jpg"
17+
alt="Woman workcationing on the beach"
18+
/>
19+
<h1 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl lg:text-3xl xl:text-4xl">
20+
You can work from anywhere.
21+
<br class="hidden lg:inline" />
22+
<span class="text-indigo-500">Take advantage of it.</span>
23+
</h1>
24+
<p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
25+
Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy some nice weather even when you're not
26+
on vacation.
27+
</p>
28+
<div class="mt-4 sm:mt-6">
29+
<a
30+
class="inline-block px-5 py-3 rounded-lg transform transition bg-indigo-500 hover:bg-indigo-400 hover:-translate-y-0.5 focus:ring-indigo-500 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-offset-2 active:bg-indigo-600 uppercase tracking-wider font-semibold text-sm text-white shadow-lg sm:text-base"
31+
href="#"
32+
>
33+
Book your escape
34+
</a>
35+
</div>
36+
</div>
37+
</div>
38+
<div class="hidden relative lg:block 2xl:col-span-3">
39+
<img
40+
class="absolute inset-0 w-full h-full object-cover object-center"
41+
src="/img/beach-work.jpg"
42+
alt="Woman workcationing on the beach"
43+
/>
44+
</div>
45+
</div>
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)