From 22035509fc9fe6a3d71cf9d16f33e14fdf6531a4 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Thu, 21 Sep 2023 10:57:07 -0600 Subject: [PATCH 1/4] update: update readme --- packages/integrations/tailwind/README.md | 59 ++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index 8634d4b16c1d..a817ef86bd1c 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -61,6 +61,65 @@ export default defineConfig({ }); ``` +Then, create a `tailwind.config.js` file in your project's root directory. You can use the following command to generate a basic configuration file for you: + +```sh +npx tailwindcss init +``` + +Add this basic configuration to your `tailwind.config.js` file: + +```js ins={4} "content: ['./src/**/*.{astro,js,ts,tsx,md,mdx}']" +// tailwind.config.js +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{astro,js,ts,tsx,md,mdx}"], + theme: { + extend: {}, + }, + plugins: [], +} +``` + +:::note +If you're using any other UI framework, remember to add the extension to the content array. For example, if you're using Vue, you'll need to add `./src/**/*.vue` to the content array. +::: + +Add a directory `styles` to your `src` directory, and create a file called `global.css` inside of it. This is where you can add your own custom CSS styles or directives. For example, you can add a `@layer` directive to add your own custom styles to the `base` layer: + +```css +/* src/styles/global.css */ +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +Finally, import your `global.css` file inside your Layout component: + +```astro ins={2} "import '../styles/global.css';" +--- +import "../styles/global.css"; +interface Props { + title: string; +} +const { title } = Astro.props; +--- + + + + + + + + + {title} + + + + + +``` + ## Usage When you install the integration, Tailwind's utility classes should be ready to go right away. Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn how to use Tailwind, and if you see a utility class you want to try, add it to any HTML element to your project! From cf88579555d42c692c3c7c985431b01d605cebcd Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Fri, 22 Sep 2023 08:01:01 -0600 Subject: [PATCH 2/4] chore: applied suggestions from bluwy's review --- packages/integrations/tailwind/README.md | 25 ++++++------------------ 1 file changed, 6 insertions(+), 19 deletions(-) diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index a817ef86bd1c..5bf3f5208c75 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -61,19 +61,19 @@ export default defineConfig({ }); ``` -Then, create a `tailwind.config.js` file in your project's root directory. You can use the following command to generate a basic configuration file for you: +Then, create a `tailwind.config.cjs` file in your project's root directory. You can use the following command to generate a basic configuration file for you: ```sh npx tailwindcss init ``` -Add this basic configuration to your `tailwind.config.js` file: +Add this basic configuration to your `tailwind.config.cjs` file: ```js ins={4} "content: ['./src/**/*.{astro,js,ts,tsx,md,mdx}']" -// tailwind.config.js +// tailwind.config.cjs /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/**/*.{astro,js,ts,tsx,md,mdx}"], + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: {}, }, @@ -81,24 +81,11 @@ module.exports = { } ``` -:::note -If you're using any other UI framework, remember to add the extension to the content array. For example, if you're using Vue, you'll need to add `./src/**/*.vue` to the content array. -::: - -Add a directory `styles` to your `src` directory, and create a file called `global.css` inside of it. This is where you can add your own custom CSS styles or directives. For example, you can add a `@layer` directive to add your own custom styles to the `base` layer: - -```css -/* src/styles/global.css */ -@tailwind base; -@tailwind components; -@tailwind utilities; -``` - -Finally, import your `global.css` file inside your Layout component: +Finally, import your `base.css` file inside your Layout component: ```astro ins={2} "import '../styles/global.css';" --- -import "../styles/global.css"; +import "../styles/base.css"; interface Props { title: string; } From fb4736a6f32902c4340c7153e1931afc9adc42f4 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Fri, 22 Sep 2023 08:28:34 -0600 Subject: [PATCH 3/4] chore: removed unnecessary instruction --- packages/integrations/tailwind/README.md | 28 +----------------------- 1 file changed, 1 insertion(+), 27 deletions(-) diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index 5bf3f5208c75..96ebc74e137c 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -67,7 +67,7 @@ Then, create a `tailwind.config.cjs` file in your project's root directory. You npx tailwindcss init ``` -Add this basic configuration to your `tailwind.config.cjs` file: +Finally, add this basic configuration to your `tailwind.config.cjs` file: ```js ins={4} "content: ['./src/**/*.{astro,js,ts,tsx,md,mdx}']" // tailwind.config.cjs @@ -81,32 +81,6 @@ module.exports = { } ``` -Finally, import your `base.css` file inside your Layout component: - -```astro ins={2} "import '../styles/global.css';" ---- -import "../styles/base.css"; -interface Props { - title: string; -} -const { title } = Astro.props; ---- - - - - - - - - - {title} - - - - - -``` - ## Usage When you install the integration, Tailwind's utility classes should be ready to go right away. Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn how to use Tailwind, and if you see a utility class you want to try, add it to any HTML element to your project! From bc311c5479795b91ce5e5ba2d702e834f9a24405 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Fri, 22 Sep 2023 08:35:01 -0600 Subject: [PATCH 4/4] add: add missing extensions to tailwind.config.cjs Co-authored-by: Bjorn Lu --- packages/integrations/tailwind/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index 96ebc74e137c..269931e1e704 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -69,7 +69,7 @@ npx tailwindcss init Finally, add this basic configuration to your `tailwind.config.cjs` file: -```js ins={4} "content: ['./src/**/*.{astro,js,ts,tsx,md,mdx}']" +```js ins={4} "content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}']" // tailwind.config.cjs /** @type {import('tailwindcss').Config} */ module.exports = {