Tailwind CSS and React JS
I find Tailwind CSS to be a very popular CSS library these days. With Bootstrap, customization is much lower than with Tailwind CSS. However, you have to remember more because each Tailwind class will correspond to a property in CSS.
1. Create a React project
1 2 | npx create-react-app my-project |
- Go to the project directory
1 2 | cd my-project |
- Note: you have to install Node JS and npm, npx. You can refer to this link: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
2. Install Tailwind CSS
1 2 | npm install -D tailwindcss postcss autoprefixer |
1 2 | npx tailwindcss init -p |
3. Add information to the file tailwind.config.js
file tailwind.config.js
1 2 3 4 5 6 7 8 9 10 11 | /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } |
4. Add the files of the Tailwin library to the project’s css file
For example, I will add the index.css file of React js. You can add other files of the project then add this file to the original index.html
index.css
1 2 3 4 | @tailwind base; @tailwind components; @tailwind utilities; |
5. Test run the project
App.js
1 2 3 4 5 6 7 8 | export default function App() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> ) } |
Add the above code to the App.js file and test it. You can see the results of tailwind classes like text-3xl, font-bold