43 lines
1.7 KiB
Markdown
43 lines
1.7 KiB
Markdown
Intro and Setup
|
|
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw
|
|
|
|
- Css framwork made of utility classes and are much lower level than Bootstrap, Materialize etc for improved flexibility
|
|
|
|
**Installation**
|
|
- `npm init -y` to create package.json base file and then `npm i tailwindcss postcss autoprefixer` to install these modules locally
|
|
|
|
**How it works**
|
|
|
|
in src all the classes of tailwind and importted and tailwind script compiles it to output public style.css files which is interpretated by browser.
|
|
We can also add our styles in src file too but that is not needed often
|
|
|
|
### Setup
|
|
- Create directory named `src` and `public` and inside `src` add `style.css` and add followiing code
|
|
```css
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
```
|
|
- Also do `npx tailwindcss init` and add following in `tailwind.config.js`
|
|
```js
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: ["./public/**/*.{html,js}"],
|
|
theme: {
|
|
extend: {},
|
|
},
|
|
plugins: [],
|
|
};
|
|
|
|
```
|
|
If html file is int public folder then it is public/** ... . if its in src then it is src/**..
|
|
- In package.json under scripts section add the following script
|
|
`"build-css": "tailwindcss build src/styles.css -o public/styles.css"`
|
|
- Now run `npm run build-css` to generate style.css at public folder. this public folder may have index.html file too
|
|
|
|
- Without npm, in order to use tailwind simply add following cdn link
|
|
`<link href= "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>`
|
|
|
|
also make sure to install this if there are problems `npm i tailwindcss@3.4.17 --save-dev`
|
|
|