running tailwind / postcss

Question

I'm trying to install Tailwind to practice some basic stuff to learn how this framework works. I followed every step that Adam Wathan the creator of the framework provided and when it comes to running I face command line error: You must pass a valid list of files to parse. Also I faced a an error while defining tailwind custom markers

@tailwind base;
@tailwind components;
@tailwind utilities;

first it says unknown at rule @tailwind, then after installing stylelint and following @hasusuf answer Steps I followed

another error showing up! enter image description here

and the same command error is still there.

Any help ?

Giorgio Tempesta · Accepted Answer

Today I tried installing Tailwind in the most basic way and it worked. I took most information from https://tailwindcss.com/docs/installation/ but if you're not experienced with build tools you can get lost in the last part.

Here are the steps:

1. Create `index.html` and `styles.css` files

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="output.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="flex container mx-auto justify-center">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-8">
            Button
        </button>
    </div>
</body>
</html>

Note that the link tag is pointing to output.css and not styles.css (we'll see why in a minute).

styles.css

@tailwind base;

@tailwind components;

@tailwind utilities;

2. Initialize npm from the command line and pick the default config

npm init -y or npm init and answer to all the questions.

3. Install Tailwind from the command line

npm install tailwindcss

4. Initialize a basic Tailwind config

npx tailwindcss init

5. Build your css file

npx tailwindcss build styles.css -o output.css

Here the code you have written in styles.css will output in output.css.

6. You're done

Open index.html from your browser and edit the html or css file. Note that every change you make on the css file needs a new build (#5).

This is not the better configuration but it's a start.

running tailwind / postcss

Tags:

tailwind-css

postcss

stylelint

Alaa

1 Answers

1. Create `index.html` and `styles.css` files

2. Initialize npm from the command line and pick the default config

3. Install Tailwind from the command line

4. Initialize a basic Tailwind config

5. Build your css file

6. You're done

Giorgio Tempesta

Recent Activity

Donate For Us

running tailwind / postcss

Tags:

tailwind-css

postcss

stylelint

Alaa

1 Answers

1. Create index.html and styles.css files

2. Initialize npm from the command line and pick the default config

3. Install Tailwind from the command line

4. Initialize a basic Tailwind config

5. Build your css file

6. You're done

Giorgio Tempesta

Related questions

Recent Activity

Donate For Us

1. Create `index.html` and `styles.css` files