Skip to content

Update flask.md instructions for installing tailwindcss #1037

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+5 −7
Open

Update flask.md instructions for installing tailwindcss #1037

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions content/getting-started/flask.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,16 +101,16 @@ Now that you have a working Flask project we can proceed by installing Tailwind

You can either follow the official [installation guide](https://tailwindcss.com/docs/installation) or follow the next steps from this guide.

1. Install the `tailwindcss` package via NPM:
1. Install the `tailwindcss` and `@tailwindcss/cli` packages via NPM:

```bash
npm install -D tailwindcss
npm install -D tailwindcss @tailwindcss/cli
```

2. Create a new `tailwind.config.js` file by running the following command in your terminal:

```bash
npx tailwindcss init
npx tailwindcss-cli@latest init
```

3. Configure the template files inside the `tailwind.config.js` file:
Expand All @@ -132,15 +132,13 @@ module.exports = {
4. Create a new `static/src/` folder and add a new `input.css` file with the following content:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
```

5. Run the following command to compile and watch for changes for the Tailwind CSS file:

```bash
npx tailwindcss -i ./static/src/input.css -o ./static/dist/css/output.css --watch
npx @tailwindcss/cli -i ./static/src/input.css -o ./static/src/dist/output.css --watch
```

This will generate a new `output.css` file inside the `static/dist/css/` folder that we will now include in the newly created `index.html` template file.
Expand Down