Skip to content

Commit 07134e7

Browse files
await-ovoawait-ovo
committed
feat: init vite plugin
feat: initial implement of vite-plugin chore: test fix: lint-staged config test: add test cases for vite-plugin
1 parent 77bebd6 commit 07134e7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1504
-452
lines changed

‎.husky/pre-commit

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
#!/bin/sh
22
. "$(dirname "$0")/_/husky.sh"
33

4-
npx lint-staged
4+
pnpm lint-staged

‎README.md

+8-208
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11

2-
<h1 align='center'>tailwindcss-webpack-plugin</h1>
2+
<h1 align='center'>
33

44
<p align='center'>
55
<sup><em><a href="https://windicss.org/integrations/vite.html#design-in-devtools">"Design in DevTools"</a> for <a href="https://tailwindcss.com/">Tailwind CSS</a> ⚡️</em></sup>
66
</p>
7+
</h1>
78

89
<p align='center'>
910
<a href='https://www.npmjs.com/package/tailwindcss-webpack-plugin'>
@@ -28,222 +29,21 @@ tailwind-css-webpack-plugin example - Click to Watch!"
2829
</p>
2930

3031

31-
32-
3332
## Features
3433

3534
- 🛠️&nbsp; Zero configuration to start
3635
- ⚡️&nbsp; ["Design in DevTools"](https://windicss.org/integrations/vite.html#design-in-devtools) mode
3736
- 🎨&nbsp; [Visualizing your Tailwind CSS configuration file](https://github.com/rogden/tailwind-config-viewer#tailwind-config-viewer).
3837
- ⚙️&nbsp; Auto-inject [@tailwind](https://tailwindcss.com/docs/functions-and-directives#tailwind) directives
3938
- 📦&nbsp; No need to add tailwind to the PostCSS plugins
39+
- 🔥&nbsp; Bundler-agnostic: [Webpack](https://webpack.js.org/),[Vite](https://vitejs.dev/), etc!
4040
- 🚀&nbsp; Framework-agnostic: [Vue CLI](https://cli.vuejs.org/index.html), [Next.js](https://nextjs.org/), [Create React App](https://create-react-app.dev/), etc!
4141

42-
43-
44-
## Quick Setup
45-
46-
1. Add `tailwindcss-webpack-plugin` dependency to your project
47-
48-
```bash
49-
# Using pnpm
50-
pnpm add tailwindcss-webpack-plugin -D
51-
52-
# Using yarn
53-
yarn add --dev tailwindcss-webpack-plugin
54-
55-
# Using npm
56-
npm install --save-dev tailwindcss-webpack-plugin
57-
58-
```
59-
60-
2. Add `tailwindcss-webpack-plugin` to the webpack plugins, using [Vue CLI](https://cli.vuejs.org/index.html) as an example:
61-
62-
```js
63-
// vue.config.js
64-
const { defineConfig } = require('@vue/cli-service')
65-
const { TailwindCSSWebpackPlugin } = require('tailwindcss-webpack-plugin')
66-
67-
module.exports = defineConfig({
68-
configureWebpack: config => {
69-
config.plugins.push(new TailwindCSSWebpackPlugin());
70-
}
71-
})
72-
73-
```
74-
75-
That's it! You can now use Tailwind classes with "Design in DevTools" in your app✨
76-
77-
For more usage, see [examples](./examples/).
78-
79-
80-
81-
## Options
82-
83-
- **[`config`](#config)**
84-
- **[`entry`](#entry)**
85-
- **[`devtools`](#devtools)**
86-
87-
88-
### config
89-
90-
* Type:
91-
92-
```ts
93-
TailwindConfig | string | undefined;
94-
```
95-
96-
* Default: `undefined`
97-
98-
99-
Allows you to specify the Tailwind configuration.
100-
101-
When the type is `string`, the corresponding value indicates the location of the Tailwind configuration file; by default, `undefined` will look for `tailwind.config.js` in the current working directory.
102-
103-
When the type is `TailwindConfig`, no configuration file is read, but the incoming configuration object is used directly.
104-
105-
106-
```
107-
// webpack.config.js
108-
const { TailwindCSSWebpackPlugin } = require('tailwind-css-webpack-plugin');
109-
110-
module.exports = {
111-
plugins: [
112-
new TailwindCSSWebpackPlugin({
113-
config: './other-tailwind-config.js',
114-
})
115-
]
116-
}
117-
118-
```
119-
120-
### entry
121-
122-
* Type:
123-
124-
```ts
125-
string | undefined
126-
```
127-
128-
* Default: `undefined`
129-
130-
By default, we will automatically inject the following directive when compile:
131-
132-
```
133-
@tailwind base;
134-
@tailwind components;
135-
@tailwind utilities;
136-
```
137-
138-
However, in some cases we may need to customize the `@tailwind` directive, for example, if we want to use the `@layer` directive, or in [Next.js](https://nextjs.org/), because global styles can only be written in `styles/globals.css`, so we also need to customize the tailwind css entry.
139-
140-
If entry is specified, in addition to adding our own `@tailwind` directive, we also need to manually import `_tailwind-devtools_.js'` in our code :
141-
142-
Take [Next.js](https://nextjs.org/) as an example:
143-
144-
```
145-
// styles/globals.css
146-
@tailwind base;
147-
@tailwind components;
148-
@tailwind utilities;
149-
150-
@layer {
151-
body {
152-
color: white;
153-
}
154-
}
155-
156-
// pages/_app.tsx
157-
import '../styles/globals.css';
158-
import '_tailwind-devtools_.js';
159-
import type { AppProps } from 'next/app';
160-
161-
function MyApp({ Component, pageProps }: AppProps) {
162-
return <Component {...pageProps} />;
163-
}
164-
165-
export default MyApp;
166-
167-
168-
// next.config.js
169-
const { TailwindCSSWebpackPlugin } = require('tailwindcss-webpack-plugin');
170-
171-
/** @type {import('next').NextConfig} */
172-
module.exports = {
173-
reactStrictMode: true,
174-
webpack: config => {
175-
config.plugins.push(
176-
new TailwindCSSWebpackPlugin({
177-
entry: './styles/globals.css',
178-
}),
179-
);
180-
return config;
181-
},
182-
};
183-
184-
```
185-
186-
187-
### devtools
188-
189-
* Type:
190-
191-
```ts
192-
{
193-
port?: number;
194-
host?: string;
195-
}
196-
```
197-
198-
* Default:
199-
200-
```ts
201-
{
202-
port: 9999,
203-
host: '127.0.0.1'
204-
}
205-
```
206-
207-
Allows to customize the host and port of the devtools backend server.
208-
209-
> We use the backend server to receive classes change requests from the browser and regenerate the Tailwind utilities, and trigger webpack hot updates.
210-
211-
212-
## PostCSS Usage Issues
213-
214-
By default, using `tailwindcss-webpack-plugin` means that there is no need to configure `tailwindcss` in the PostCSS plugins.
215-
216-
However, some tools like[Create React App](https://create-react-app.dev/) will automatically add `tailwindcss` to PostCSS plugins if `tailwindcss` is installed under the project, in which case we need to manually remove `tailwindcss` plugin from PostCSS configuration:
217-
218-
Take [craco](https://github.com/gsoft-inc/craco) for example:
219-
220-
```
221-
// craco.config.js
222-
const { TailwindCSSWebpackPlugin } = require('tailwindcss-webpack-plugin');
223-
224-
module.exports = {
225-
webpack: {
226-
configure: config => {
227-
config.plugins.push(
228-
new TailwindCSSWebpackPlugin(),
229-
);
230-
return config;
231-
},
232-
},
233-
style: {
234-
postcss: {
235-
loaderOptions: options => {
236-
options.postcssOptions.plugins = options.postcssOptions.plugins.filter(
237-
plugin => plugin !== 'tailwindcss',
238-
);
239-
return options;
240-
},
241-
},
242-
},
243-
};
244-
245-
```
246-
42+
## Quick Start
43+
| | |
44+
| --------------------------------------------------- | ----------------------------------------------------------------------------------------- |
45+
| [tailwindcss-vite-plugin](./packages/vite-plugin) | Tailwind CSS "Design in Devtools" for Vite |
46+
| [tailwindcss-webpack-plugin](./packages/webpack-plugin) | Tailwind CSS "Design in Devtools" for Webpack |
24747

24848
## License
24949

‎examples/vite-react/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/vite-react/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "my-vue-app",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "tsc && vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0"
13+
},
14+
"devDependencies": {
15+
"@types/react": "^18.0.17",
16+
"@types/react-dom": "^18.0.6",
17+
"@vitejs/plugin-react": "^2.1.0",
18+
"typescript": "^4.6.4",
19+
"vite": "^3.1.0",
20+
"tailwindcss": "^3.1.8",
21+
"autoprefixer": "^10.4.12",
22+
"postcss": "^8.4.17",
23+
"tailwindcss-vite-plugin": "workspace:*"
24+
}
25+
}

‎examples/vite-react/postcss.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {},
4+
},
5+
};

‎examples/vite-react/public/vite.svg

+1
Loading

‎examples/vite-react/src/App.css

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer {
6+
body {
7+
@apply text-2xl;
8+
}
9+
}
10+
11+
#root {
12+
max-width: 1280px;
13+
margin: 0 auto;
14+
padding: 2rem;
15+
text-align: center;
16+
}
17+
18+
.logo {
19+
height: 6em;
20+
padding: 1.5em;
21+
will-change: filter;
22+
}
23+
.logo:hover {
24+
filter: drop-shadow(0 0 2em #646cffaa);
25+
}
26+
.logo.react:hover {
27+
filter: drop-shadow(0 0 2em #61dafbaa);
28+
}
29+
30+
@keyframes logo-spin {
31+
from {
32+
transform: rotate(0deg);
33+
}
34+
to {
35+
transform: rotate(360deg);
36+
}
37+
}
38+
39+
@media (prefers-reduced-motion: no-preference) {
40+
a:nth-of-type(2) .logo {
41+
animation: logo-spin infinite 20s linear;
42+
}
43+
}
44+
45+
.card {
46+
padding: 2em;
47+
}
48+
49+
.read-the-docs {
50+
color: #888;
51+
}

‎examples/vite-react/src/App.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useState } from 'react';
2+
import reactLogo from './assets/react.svg';
3+
import './App.css';
4+
import '_tailwind-devtools_.js';
5+
6+
function App() {
7+
const [count, setCount] = useState(0);
8+
9+
return (
10+
<div className="App bg-green-100">
11+
<div>
12+
<a href="https://vitejs.dev" target="_blank">
13+
<img src="/vite.svg" className="logo" alt="Vite logo" />
14+
</a>
15+
<a href="https://reactjs.org" target="_blank">
16+
<img src={reactLogo} className="logo react" alt="React logo" />
17+
</a>
18+
</div>
19+
<h1>Vite + React</h1>
20+
<div className="card">
21+
<button onClick={() => setCount(count => count + 1)}>
22+
count is {count}
23+
</button>
24+
<p>
25+
Edit <code>src/App.tsx</code> and save to test HMR
26+
</p>
27+
</div>
28+
<p className="read-the-docs">
29+
Click on the Vite and React logos to learn more
30+
</p>
31+
</div>
32+
);
33+
}
34+
35+
export default App;

‎examples/vite-react/src/assets/react.svg

+1
Loading

0 commit comments

Comments
 (0)