2

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 ?

Alaa El Saedy
  • 368
  • 3
  • 13

2 Answers2

8

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.

Community
  • 1
  • 1
Giorgio Tempesta
  • 1,816
  • 24
  • 32
  • 1
    Thanks Giorgio for your detailed answer, I followed your steps and figured that my problem was in package.json file while writing a command to transpile to pure css. – Alaa El Saedy Jun 17 '20 at 01:37
  • These are correct steps buy maybe need to improve for best performance. Can you add JIT mode config and -watch steps please. – hakki Jun 27 '21 at 12:05
  • @hakiko I happened to be trying to do the same thing when I answered the question, but I haven't followed recent developments like JIT: you can ask a new question if you need more information – Giorgio Tempesta Jun 28 '21 at 09:24
3

This answer is outdated. Newer versions of tailwind support JIT as default

Giorgio Tempesta's steps are correct but need to improve for best performance.

Follow below steps for live output to your output css file with JIT mode (Just in time). So when you working on your project you don't need to compile source css file manually. Also JIT mode brings dynamic class implementations like bg-[#abcaaa]

in your package.json file add these to scripts area like

 "scripts": {
    "watch-tailwind": "npx tailwindcss -i source.css -o output.css -w --minify",
    "build-tailwind": "npx tailwindcss -i source.css -o output.css --minify"
  },

Flag meanings;

-i:input file
-o:output file
-w:watch changes
--minify: minify output css file
  • source.css is your main ang gigantic source css file.
  • output.css is your just in time compiled and minified css file.

Also your tailwind.config.css file should look basically like this

module.exports = {
  mode: "jit", <------------ add this for immediate compile
  purge: ["./src/**/*.html", "./src/**/*.js"], <--- give here your source files
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

After saved this settings on your package.json run;

npm run watch-tailwind

When you run this npm script, tailwind starts to listen changes in your project and output ONLY necessary css declarations to your output.css

It's huge difference. Before you doing above steps your css file is nearly 18MB

After compiling it's nearly 20-30KB

See JIT mode in action: https://tailwindcss.com/docs/just-in-time-mode

This is new era for tailwind.

Note: JIT mode available on v2.1+

hakki
  • 6,181
  • 6
  • 62
  • 106
  • Just a note that this update is slightly outdated where **purge:** in the `tailwind.config.css` file has been replaced with **content:** in [TailwindCSS 3.0+ migration](https://tailwindcss.com/docs/upgrade-guide#configure-content-sources). It also looks like JIT mode is no longer necessary to have as it's the default. – Kyle J Apr 03 '23 at 15:58