michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat(tailwind): create a tailwind.config.mjs file by default (#8638)

Browse source
This commit is contained in:
Florian Lefebvre 2023-10-09 16:21:26 +02:00 committed by GitHub
parent 29cdfa0248
commit 160d1cd755
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/early-ghosts-hang.md Normal file
View file

@ -0,0 +1,6 @@
---
'@astrojs/tailwind': patch
'astro': patch
---
The `@astrojs/tailwind` integration now creates a `tailwind.config.mjs` file by default

4
packages/astro/src/cli/add/index.ts
View file

@ -50,7 +50,7 @@ const ALIASES = new Map([
]); ]);
const ASTRO_CONFIG_STUB = `import { defineConfig } from 'astro/config';\n\nexport default defineConfig({});`; const ASTRO_CONFIG_STUB = `import { defineConfig } from 'astro/config';\n\nexport default defineConfig({});`;
const TAILWIND_CONFIG_STUB = `/** @type {import('tailwindcss').Config} */ const TAILWIND_CONFIG_STUB = `/** @type {import('tailwindcss').Config} */
module.exports = { export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: { theme: {
extend: {}, extend: {},
@ -160,7 +160,7 @@ export async function add(names: string[], { flags }: AddOptions) {
'./tailwind.config.mjs', './tailwind.config.mjs',
'./tailwind.config.js', './tailwind.config.js',
], ],
defaultConfigFile: './tailwind.config.cjs', defaultConfigFile: './tailwind.config.mjs',
defaultConfigContent: TAILWIND_CONFIG_STUB, defaultConfigContent: TAILWIND_CONFIG_STUB,
}); });
} }

6
packages/integrations/tailwind/README.md
View file

@ -94,7 +94,7 @@ https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b
### Configuring Tailwind ### Configuring Tailwind
If you used the Quick Install instructions and said yes to each prompt, you'll see a `tailwind.config.cjs` file in your project's root directory. Use this file for your Tailwind configuration changes. You can learn how to customize Tailwind using this file [in the Tailwind docs](https://tailwindcss.com/docs/configuration). If you used the Quick Install instructions and said yes to each prompt, you'll see a `tailwind.config.mjs` file in your project's root directory. Use this file for your Tailwind configuration changes. You can learn how to customize Tailwind using this file [in the Tailwind docs](https://tailwindcss.com/docs/configuration).
If it isn't there, you add your own `tailwind.config.(js|cjs|mjs)` file to the root directory and the integration will use its configurations. This can be great if you already have Tailwind configured in another project and want to bring those settings over to this one. If it isn't there, you add your own `tailwind.config.(js|cjs|mjs)` file to the root directory and the integration will use its configurations. This can be great if you already have Tailwind configured in another project and want to bring those settings over to this one.
@ -178,8 +178,8 @@ error The `text-special` class does not exist. If `text-special` is a custom c
[Instead of using `@layer` directives in a global stylesheet](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css), define your custom styles by adding a plugin to your Tailwind config to fix it: [Instead of using `@layer` directives in a global stylesheet](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css), define your custom styles by adding a plugin to your Tailwind config to fix it:
```js ```js
// tailwind.config.cjs // tailwind.config.mjs
module.exports = { export default {
// ... // ...
plugins: [ plugins: [
function ({ addComponents, theme }) { function ({ addComponents, theme }) {

2
packages/integrations/tailwind/src/index.ts
View file

@ -50,7 +50,7 @@ async function getViteConfiguration(
type TailwindOptions = { type TailwindOptions = {
/** /**
* Path to your tailwind config file * Path to your tailwind config file
* @default 'tailwind.config.js' * @default 'tailwind.config.mjs'
*/ */
configFile?: string; configFile?: string;
/** /**