feat(tailwind): create a tailwind.config.mjs file by default (#8638)
This commit is contained in:
parent
29cdfa0248
commit
160d1cd755
4 changed files with 12 additions and 6 deletions
6
.changeset/early-ghosts-hang.md
Normal file
6
.changeset/early-ghosts-hang.md
Normal file
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
'@astrojs/tailwind': patch
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
The `@astrojs/tailwind` integration now creates a `tailwind.config.mjs` file by default
|
|
@ -50,7 +50,7 @@ const ALIASES = new Map([
|
|||
]);
|
||||
const ASTRO_CONFIG_STUB = `import { defineConfig } from 'astro/config';\n\nexport default defineConfig({});`;
|
||||
const TAILWIND_CONFIG_STUB = `/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
export default {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
|
@ -160,7 +160,7 @@ export async function add(names: string[], { flags }: AddOptions) {
|
|||
'./tailwind.config.mjs',
|
||||
'./tailwind.config.js',
|
||||
],
|
||||
defaultConfigFile: './tailwind.config.cjs',
|
||||
defaultConfigFile: './tailwind.config.mjs',
|
||||
defaultConfigContent: TAILWIND_CONFIG_STUB,
|
||||
});
|
||||
}
|
||||
|
|
|
@ -94,7 +94,7 @@ https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b
|
|||
|
||||
### 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.
|
||||
|
||||
|
@ -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:
|
||||
|
||||
```js
|
||||
// tailwind.config.cjs
|
||||
module.exports = {
|
||||
// tailwind.config.mjs
|
||||
export default {
|
||||
// ...
|
||||
plugins: [
|
||||
function ({ addComponents, theme }) {
|
||||
|
|
|
@ -50,7 +50,7 @@ async function getViteConfiguration(
|
|||
type TailwindOptions = {
|
||||
/**
|
||||
* Path to your tailwind config file
|
||||
* @default 'tailwind.config.js'
|
||||
* @default 'tailwind.config.mjs'
|
||||
*/
|
||||
configFile?: string;
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue