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

Commit 852474a

Browse files
adamwathanadamwathan
committed
Init
0 parents  commit 852474a

File tree

15 files changed

+8478
-0
lines changed

15 files changed

+8478
-0
lines changed

‎README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Tailwind CSS Setup Examples
2+
3+
A repository of examples showing how to setup Tailwind in a variety of different frameworks and environments.
4+
5+
## Available Examples
6+
7+
- [vue-cli](examples/vue-cli)
8+
9+
## Requested Examples
10+
11+
If you are experienced with any of these frameworks, we'd love a PR that includes a barebones example of the best way to set up Tailwind in that environment.
12+
13+
If we're missing you're favorite framework, don't hesitate to PR that either!
14+
15+
### JS Frameworks
16+
17+
- create-react-app
18+
- Ember.js
19+
- Sapper
20+
- Angular
21+
- Next.js
22+
- Nuxt.js
23+
- Gatsby
24+
- Gridsome
25+
26+
### Server-side Frameworks
27+
28+
- Laravel
29+
- Rails
30+
- Django
31+
- Symfony
32+
33+
### Content Management Systems
34+
35+
- Wordpress
36+
- Statamic
37+
- Craft CMS
38+
- Drupal

‎examples/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"dependencies": {
3+
"tailwindcss": "^1.0.3"
4+
}
5+
}

‎examples/vue-cli/.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

‎examples/vue-cli/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# vue-cli
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn run build
16+
```
17+
18+
### Lints and fixes files
19+
```
20+
yarn run lint
21+
```

‎examples/vue-cli/babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
}

‎examples/vue-cli/package.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "vue-cli",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^2.6.5",
12+
"tailwindcss": "^1.0.3",
13+
"vue": "^2.6.10"
14+
},
15+
"devDependencies": {
16+
"@vue/cli-plugin-babel": "^3.0.1",
17+
"@vue/cli-plugin-eslint": "^3.0.1",
18+
"@vue/cli-service": "^3.0.1",
19+
"babel-eslint": "^10.0.1",
20+
"eslint": "^5.16.0",
21+
"eslint-plugin-vue": "^5.0.0",
22+
"vue-template-compiler": "^2.6.10"
23+
},
24+
"eslintConfig": {
25+
"root": true,
26+
"env": {
27+
"node": true
28+
},
29+
"extends": [
30+
"plugin:vue/essential",
31+
"eslint:recommended"
32+
],
33+
"rules": {},
34+
"parserOptions": {
35+
"parser": "babel-eslint"
36+
}
37+
},
38+
"browserslist": [
39+
"> 1%",
40+
"last 2 versions"
41+
]
42+
}

‎examples/vue-cli/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+
require('tailwindcss'),
4+
require('autoprefixer'),
5+
]
6+
}

‎examples/vue-cli/public/favicon.ico

4.19 KB
Binary file not shown.

‎examples/vue-cli/public/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title>vue-cli</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but vue-cli doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎examples/vue-cli/src/App.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div id="app" class="min-h-screen flex items-center justify-center">
3+
<h1 class="text-5xl font-bold text-purple-500">Hello from Tailwind.</h1>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'app',
10+
components: {}
11+
}
12+
</script>
13+
14+
<style src="./assets/tailwind.css">

‎examples/vue-cli/src/assets/logo.png

6.69 KB
Loading

‎examples/vue-cli/src/assets/tailwind.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎examples/vue-cli/src/components/HelloWorld.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="hello">
3+
<h1>{{ msg }}</h1>
4+
<p>
5+
For a guide and recipes on how to configure / customize this project,<br>
6+
check out the
7+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8+
</p>
9+
<h3>Installed CLI Plugins</h3>
10+
<ul>
11+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13+
</ul>
14+
<h3>Essential Links</h3>
15+
<ul>
16+
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17+
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18+
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19+
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20+
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21+
</ul>
22+
<h3>Ecosystem</h3>
23+
<ul>
24+
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25+
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26+
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27+
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28+
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29+
</ul>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name: 'HelloWorld',
36+
props: {
37+
msg: String
38+
}
39+
}
40+
</script>
41+
42+
<!-- Add "scoped" attribute to limit CSS to this component only -->
43+
<style scoped>
44+
h3 {
45+
margin: 40px 0 0;
46+
}
47+
ul {
48+
list-style-type: none;
49+
padding: 0;
50+
}
51+
li {
52+
display: inline-block;
53+
margin: 0 10px;
54+
}
55+
a {
56+
color: #42b983;
57+
}
58+
</style>

‎examples/vue-cli/src/main.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
4+
Vue.config.productionTip = false
5+
6+
new Vue({
7+
render: h => h(App),
8+
}).$mount('#app')

0 commit comments

Comments
 (0)