1

I have setted up tailwind for my simple web project. I believe my setup is alright, although it doens't seem to change the styles from my HTML file. I followed the docs on how to install. DOCS: https://tailwindcss.com/docs/installation My index.html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nilton SF</title>        
        <link rel="stylesheet" href="../tailwind/output.css">
</head>
<body>
    <div>
        <h1 class="text-blue-600">
            Hello world!
        </h1>
    </div>
</body>
</html>

tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ["./src/*.{html}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

This is the folder setup image: enter image description here

For running my program i use: yarn dev This is a piece of package.json:

"scripts": {
    "build": "webpack --config ./bundler/webpack.prod.js",
    "dev": "webpack serve --config ./bundler/webpack.dev.js"
  },
Nilton Schumacher F
  • 814
  • 3
  • 13
  • 43
  • Hey, I think you are missing the CLI build process. You can see it in the link you sent yourself. You need to start the tailwindcss process first then start the webpack bundle. Or follow this [link](https://dev.to/elfakhalid/your-first-tailwindcss-setup-with-webpack-1gfm) to integrate tailwindcss with webpack. – Alimuhammadiii Jul 08 '22 at 18:04

2 Answers2

1

My package.json looks like this:

"scripts": {
  "build": "npx tailwindcss --config tailwind.config.js --postcss postcss.config.js -i ./wwwroot/css/tail.css -o ./wwwroot/css/tail.min.css",
  "watch": "npx tailwindcss --watch --config tailwind.config.js --postcss postcss.config.js -i ./wwwroot/css/tail.css -o ./wwwroot/css/tail.min.css",
  "publish": "npx tailwindcss --minify --config tailwind.config.js --postcss postcss.config.js -i ./wwwroot/css/tail.css -o ./wwwroot/css/tail.min.css"
},

In your package.json you are missing the output path ../tailwind/output.css

Taco
  • 181
  • 1
  • 12
0

Open tailwind.config.json and instead of content: [],

add this: content: ['./src/**/*.{js,jsx,ts,tsx}'],

Found here: https://github.com/vadimdemedes/tailwind-rn/issues/156#issuecomment-1057367140

Filip Savic
  • 2,737
  • 1
  • 29
  • 34