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

Commit 1c5b10c

Browse files
adamwathanadamwathan
committed
Fix conflicts
2 parents 2d03241 + a0f45fc commit 1c5b10c

19 files changed

+306
-1
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ A repository of examples showing how to setup Tailwind in a variety of different
77
- [vue-cli](examples/vue-cli)
88
- [nuxt](examples/nuxt)
99
- [Laravel](examples/laravel) (PostCSS-only)
10+
- [Gridsome](examples/gridsome)
1011

1112
## Requested Examples
1213

@@ -25,7 +26,6 @@ If we're missing you're favorite framework, don't hesitate to PR that either!
2526
- Next.js
2627
- Nuxt.js
2728
- Gatsby
28-
- Gridsome
2929

3030
### Server-side Frameworks
3131

‎examples/gridsome/.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
*.log
2+
.cache
3+
.DS_Store
4+
src/.temp
5+
node_modules
6+
dist
7+
.env
8+
.env.*

‎examples/gridsome/README.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# gridsome
2+
3+
If you don't have an existing Gridsome project, check out their docs on how to get started.
4+
5+
Once you have a Gridsome site, install Tailwind by running this in the root of the project:
6+
7+
```
8+
npm install tailwindcss
9+
```
10+
11+
More than likely, you want to use PurgeCSS as well, so let's install that too:
12+
13+
```
14+
npm install @fullhuman/postcss-purgecss
15+
```
16+
17+
Next, initialize your Tailwind config:
18+
19+
```
20+
./node_modules/.bin/tailwind init
21+
```
22+
23+
Then in `gridsome.config.js`, require Tailwind and add it as a PostCSS plugin, as well as our PurgeCSS config:
24+
25+
```js
26+
// gridsome.config.js
27+
const purgecss = require('@fullhuman/postcss-purgecss')
28+
const tailwind = require('tailwindcss')
29+
30+
const postcssPlugins = [
31+
tailwind('./tailwind.config.js'),
32+
]
33+
34+
// add purgecss only when building for production
35+
if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss())
36+
37+
module.exports = {
38+
css: {
39+
loaderOptions: {
40+
postcss: {
41+
plugins: postcssPlugins,
42+
},
43+
},
44+
},
45+
}
46+
```
47+
48+
Now let's create a `purgecss.config.js` file to define some options for PurgeCSS:
49+
50+
```js
51+
// purgecss.config.js
52+
53+
class TailwindExtractor {
54+
static extract(content) {
55+
return content.match(/[A-z0-9-:\\/]+/g)
56+
}
57+
}
58+
59+
module.exports = {
60+
content: [
61+
'./src/**/*.vue',
62+
'./src/**/*.js',
63+
'./src/**/*.jsx',
64+
'./src/**/*.html',
65+
'./src/**/*.pug',
66+
'./src/**/*.md',
67+
],
68+
whitelist: [
69+
'body',
70+
'html',
71+
'img',
72+
'a',
73+
'g-image',
74+
'g-image--lazy',
75+
'g-image--loaded',
76+
],
77+
extractors: [
78+
{
79+
extractor: TailwindExtractor,
80+
extensions: ['vue', 'js', 'jsx', 'md', 'html', 'pug'],
81+
},
82+
],
83+
}
84+
```
85+
86+
Next up, we'll create a file at `src/assets/tailwind.css`:
87+
88+
```css
89+
@tailwind base;
90+
@tailwind components;
91+
@tailwind utilities;
92+
```
93+
94+
Finally, we'll import that into our `src/main.js` file:
95+
96+
```js
97+
import DefaultLayout from '~/layouts/Default.vue'
98+
import '~/assets/tailwind.css'
99+
100+
export default function (Vue, { router, head, isClient }) {
101+
// Set default layout as a global component
102+
Vue.component('Layout', DefaultLayout)
103+
}
104+
```
105+
106+
Now you should be all set to start using Tailwind and PurgeCSS in your Gridsome project!

‎examples/gridsome/gridsome.config.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const purgecss = require('@fullhuman/postcss-purgecss')
2+
const tailwind = require('tailwindcss')
3+
4+
const postcssPlugins = [
5+
tailwind('./tailwind.config.js'),
6+
]
7+
8+
// add purgecss only when building for production
9+
if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss())
10+
11+
module.exports = {
12+
siteName: 'Gridsome Tailwind Setup',
13+
css: {
14+
loaderOptions: {
15+
postcss: {
16+
plugins: postcssPlugins,
17+
},
18+
},
19+
},
20+
}

‎examples/gridsome/gridsome.server.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Server API makes it possible to hook into various parts of Gridsome
2+
// on server-side and add custom data to the GraphQL data layer.
3+
// Learn more: https://gridsome.org/docs/server-api
4+
5+
// Changes here require a server restart.
6+
// To restart press CTRL + C in terminal and run `gridsome develop`
7+
8+
module.exports = function (api) {
9+
api.loadSource(({ addContentType }) => {
10+
// Use the Data Store API here: https://gridsome.org/docs/data-store-api
11+
})
12+
13+
api.createPages(({ createPage }) => {
14+
// Use the Pages API here: https://gridsome.org/docs/pages-api
15+
})
16+
}

‎examples/gridsome/package.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "gridsome",
3+
"private": true,
4+
"scripts": {
5+
"build": "gridsome build",
6+
"develop": "gridsome develop",
7+
"explore": "gridsome explore"
8+
},
9+
"dependencies": {
10+
"@fullhuman/postcss-purgecss": "^1.2.0",
11+
"gridsome": "^0.6.0",
12+
"tailwindcss": "^1.0.3"
13+
}
14+
}

‎examples/gridsome/purgecss.config.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
class TailwindExtractor {
2+
static extract(content) {
3+
return content.match(/[A-z0-9-:\\/]+/g)
4+
}
5+
}
6+
7+
module.exports = {
8+
content: [
9+
'./src/**/*.vue',
10+
'./src/**/*.js',
11+
'./src/**/*.jsx',
12+
'./src/**/*.html',
13+
'./src/**/*.pug',
14+
'./src/**/*.md',
15+
],
16+
whitelist: [
17+
'body',
18+
'html',
19+
'img',
20+
'a',
21+
'g-image',
22+
'g-image--lazy',
23+
'g-image--loaded',
24+
],
25+
extractors: [
26+
{
27+
extractor: TailwindExtractor,
28+
extensions: ['vue', 'js', 'jsx', 'md', 'html', 'pug'],
29+
},
30+
],
31+
}

‎examples/gridsome/src/assets/tailwind.css

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

‎examples/gridsome/src/components/README.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Add components that will be imported to Pages and Layouts to this folder.
2+
Learn more about components here: https://gridsome.org/docs/components
3+
4+
You can delete this file.

‎examples/gridsome/src/favicon.png

29.9 KB
Loading

‎examples/gridsome/src/layouts/Default.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="mx-auto px-8 max-w-3xl">
3+
<header class="flex justify-between items-center mb-10 h-16">
4+
<g-link to="/" class="text-lg font-normal">{{ $static.metaData.siteName }}</g-link>
5+
<nav>
6+
<g-link class="text-teal-500 hover:underline" to="/">Home</g-link>
7+
<g-link class="ml-6 text-teal-500 hover:underline" to="/about">About</g-link>
8+
</nav>
9+
</header>
10+
<slot/>
11+
</div>
12+
</template>
13+
14+
<static-query>
15+
query {
16+
metaData {
17+
siteName
18+
}
19+
}
20+
</static-query>
21+
22+
<style>
23+
body {
24+
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
25+
margin:0;
26+
padding:0;
27+
line-height: 1.5;
28+
}
29+
</style>

‎examples/gridsome/src/layouts/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Layout components are used to wrap pages and templates. Layouts should contain components like headers, footers or sidebars that will be used across the site.
2+
3+
Learn more about Layouts: https://gridsome.org/docs/layouts
4+
5+
You can delete this file.

‎examples/gridsome/src/main.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// This is the main.js file. Import global CSS and scripts here.
2+
// The Client API can be used here. Learn more: gridsome.org/docs/client-api
3+
4+
import DefaultLayout from '~/layouts/Default.vue'
5+
import '~/assets/tailwind.css'
6+
7+
export default function (Vue, { router, head, isClient }) {
8+
// Set default layout as a global component
9+
Vue.component('Layout', DefaultLayout)
10+
}

‎examples/gridsome/src/pages/About.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<Layout>
3+
<h1>About us</h1>
4+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
5+
</Layout>
6+
</template>
7+
8+
<script>
9+
export default {
10+
metaInfo: {
11+
title: 'About us'
12+
}
13+
}
14+
</script>

‎examples/gridsome/src/pages/Index.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<Layout>
3+
<!-- Learn how to use images here: https://gridsome.org/docs/images -->
4+
<g-image alt="Example image" src="~/favicon.png" width="135" />
5+
6+
<h1 class="text-3xl my-4">Hello, Tailwind!</h1>
7+
8+
<p class="mb-4">
9+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
10+
</p>
11+
12+
<p class="mb-4">
13+
<a class="mr-4 text-teal-600 hover:underline" href="https://gridsome.org/docs" target="_blank" rel="noopener">Gridsome Docs</a>
14+
<a class="mr-4 text-teal-600 hover:underline" href="https://github.com/gridsome/gridsome" target="_blank" rel="noopener">GitHub</a>
15+
</p>
16+
17+
</Layout>
18+
</template>
19+
20+
<script>
21+
export default {
22+
metaInfo: {
23+
title: 'Hello, Tailwind!'
24+
}
25+
}
26+
</script>

‎examples/gridsome/src/pages/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Pages are usually used for normal pages or for listing items from a GraphQL collection.
2+
Add .vue files here to create pages. For example **About.vue** will be **site.com/about**.
3+
Learn more about pages: https://gridsome.org/docs/pages
4+
5+
You can delete this file.

‎examples/gridsome/src/templates/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Templates for **GraphQL collections** should be added here.
2+
To create a template for a collection called `WordPressPost`
3+
create a file named `WordPressPost.vue` in this folder.
4+
5+
Learn more: https://gridsome.org/docs/templates
6+
7+
You can delete this file.

‎examples/gridsome/static/.gitkeep

Whitespace-only changes.

‎examples/gridsome/tailwind.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
theme: {
3+
extend: {}
4+
},
5+
variants: {},
6+
plugins: []
7+
}

0 commit comments

Comments
 (0)