Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 313ab2f

Browse files
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

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

Lines changed: 7 additions & 0 deletions
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+
}
Lines changed: 7 additions & 0 deletions
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+
}
Lines changed: 39 additions & 0 deletions
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;
Lines changed: 9 additions & 0 deletions
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

Lines changed: 5 additions & 2 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /