Skip to content

Commit 313ab2f

Browse files
committed
Add tailwind as an option
1 parent ca59ce9 commit 313ab2f

File tree

6 files changed

+92
-6
lines changed

6 files changed

+92
-6
lines changed

index.ts

+25-4
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ async function init() {
7878
// --playwright
7979
// --eslint
8080
// --eslint-with-prettier (only support prettier through eslint for simplicity)
81+
// --tailwind
8182
// --force (for force overwriting)
8283
const argv = minimist(process.argv.slice(2), {
8384
alias: {
@@ -102,7 +103,8 @@ async function init() {
102103
argv.vitest ??
103104
argv.cypress ??
104105
argv.playwright ??
105-
argv.eslint
106+
argv.eslint ??
107+
argv.tailwind
106108
) === 'boolean'
107109

108110
let targetDir = argv._[0]
@@ -122,6 +124,7 @@ async function init() {
122124
needsE2eTesting?: false | 'cypress' | 'playwright'
123125
needsEslint?: boolean
124126
needsPrettier?: boolean
127+
needsTailwind?: boolean
125128
} = {}
126129

127130
try {
@@ -137,6 +140,7 @@ async function init() {
137140
// - Add Playwright for end-to-end testing?
138141
// - Add ESLint for code quality?
139142
// - Add Prettier for code formatting?
143+
// - Add Tailwind for styling?
140144
result = await prompts(
141145
[
142146
{
@@ -252,6 +256,14 @@ async function init() {
252256
initial: false,
253257
active: 'Yes',
254258
inactive: 'No'
259+
},
260+
{
261+
name: 'needsTailwind',
262+
type: () => (isFeatureFlagsUsed ? null : 'toggle'),
263+
message: 'Add TailwindCss for styling?',
264+
initial: false,
265+
active: 'Yes',
266+
inactive: 'No'
255267
}
256268
],
257269
{
@@ -277,7 +289,8 @@ async function init() {
277289
needsPinia = argv.pinia,
278290
needsVitest = argv.vitest || argv.tests,
279291
needsEslint = argv.eslint || argv['eslint-with-prettier'],
280-
needsPrettier = argv['eslint-with-prettier']
292+
needsPrettier = argv['eslint-with-prettier'],
293+
needsTailwind = argv['tailwind']
281294
} = result
282295

283296
const { needsE2eTesting } = result
@@ -357,6 +370,11 @@ async function init() {
357370
renderEslint(root, { needsTypeScript, needsCypress, needsCypressCT, needsPrettier })
358371
}
359372

373+
// Render tailwind config
374+
if (needsTailwind) {
375+
render('config/tailwind')
376+
}
377+
360378
// Render code template.
361379
// prettier-ignore
362380
const codeTemplate =
@@ -440,14 +458,17 @@ async function init() {
440458
needsCypress,
441459
needsPlaywright,
442460
needsCypressCT,
443-
needsEslint
461+
needsEslint,
462+
needsTailwind
444463
})
445464
)
446465

447466
console.log(`\nDone. Now run:\n`)
448467
if (root !== cwd) {
449468
const cdProjectName = path.relative(cwd, root)
450-
console.log(` ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}`)
469+
console.log(
470+
` ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}`
471+
)
451472
}
452473
console.log(` ${bold(green(getCommand(packageManager, 'install')))}`)
453474
if (needsPrettier) {

template/config/tailwind/package.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"devDependencies": {
3+
"autoprefixer": "^10.4.7",
4+
"postcss": "^8.4.14",
5+
"tailwindcss": "^3.1.2"
6+
}
7+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// eslint-disable-next-line no-undef
2+
module.exports = {
3+
plugins: {
4+
tailwindcss: {},
5+
autoprefixer: {}
6+
}
7+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import './base.css';
2+
3+
#app {
4+
max-width: 1280px;
5+
margin: 0 auto;
6+
padding: 2rem;
7+
8+
font-weight: normal;
9+
}
10+
11+
a,
12+
.green {
13+
text-decoration: none;
14+
color: hsla(160, 100%, 37%, 1);
15+
transition: 0.4s;
16+
}
17+
18+
@media (hover: hover) {
19+
a:hover {
20+
background-color: hsla(160, 100%, 37%, 0.2);
21+
}
22+
}
23+
24+
@media (min-width: 1024px) {
25+
body {
26+
display: flex;
27+
place-items: center;
28+
}
29+
30+
#app {
31+
display: grid;
32+
grid-template-columns: 1fr 1fr;
33+
padding: 0 2rem;
34+
}
35+
}
36+
37+
@tailwind base;
38+
@tailwind components;
39+
@tailwind utilities;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/** @type {import('tailwindcss').Config} */
2+
// eslint-disable-next-line no-undef
3+
module.exports = {
4+
content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
5+
theme: {
6+
extend: {}
7+
},
8+
plugins: []
9+
}

utils/generateReadme.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,17 @@ export default function generateReadme({
2323
needsCypressCT,
2424
needsPlaywright,
2525
needsVitest,
26-
needsEslint
26+
needsEslint,
27+
needsTailwind
2728
}) {
2829
const commandFor = (scriptName: string, args?: string) =>
2930
getCommand(packageManager, scriptName, args)
3031

3132
let readme = `# ${projectName}
3233
33-
This template should help get you started developing with Vue 3 in Vite.
34+
This template should help get you started developing with Vue 3 ${
35+
needsTailwind ? 'alongside [TailwindCSS](https://tailwindcss.com/) ' : ''
36+
}in Vite.
3437
3538
## Recommended IDE Setup
3639

0 commit comments

Comments
 (0)