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

File tree

19 files changed

+306
-1
lines changed

19 files changed

+306
-1
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
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

Lines changed: 8 additions & 0 deletions
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

Lines changed: 106 additions & 0 deletions
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

Lines changed: 20 additions & 0 deletions
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

Lines changed: 16 additions & 0 deletions
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

Lines changed: 14 additions & 0 deletions
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

Lines changed: 31 additions & 0 deletions
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

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/gridsome/src/components/README.md

Lines changed: 4 additions & 0 deletions
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

0 commit comments

Comments
 (0)