janstuemmel/README.md

## README.md

      
    Raw
  

              README.md
            
          
    HTML with tailwind css

npm i -D tailwindcss normalize.css postcss autoprefixer
npx tailwindcss -i ./main.css -o ./dist/output.css --watch

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>title</title>
  <link rel="stylesheet" href="/main.css" type="text/css">
</head>
<body>
  <div id="root"></div>
  <script src="/main.js" type="text/javascript"></script>
</body>
</html>

## main.css
@import "normalize.css";

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

/* or without tailwind */

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif
}

ol, ul {
  list-style: none;
}

*, *::after, *::before {
  box-sizing: border-box;
}

## postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

## tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{html,jsx,tsx}',
  ],
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>title</title>
	<link rel="stylesheet" href="/main.css" type="text/css">
	</head>
	<body>
	<div id="root"></div>
	<script src="/main.js" type="text/javascript"></script>
	</body>
	</html>
	@import "normalize.css";

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

	/* or without tailwind */

	body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif
	}

	ol, ul {
	list-style: none;
	}

	, ::after, *::before {
	box-sizing: border-box;
	}
	module.exports = {
	plugins: {
	tailwindcss: {},
	autoprefixer: {},
	},
	}
	/** @type {import('tailwindcss').Config} */
	module.exports = {
	content: [
	'./index.html',
	'./src/*/.{html,jsx,tsx}',
	],
	}