- If you're on Next.js v10... Run the following command.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
- Create your configuration files
npx tailwindcss init -p
- Styled Components is a CSS-in-JS tool that lets you write CSS in JavaScript files. Run the following command in your project’s root directory to install styled-components.
npm install styled-components
npm install -D babel-plugin-styled-components
- Create a new file named `.babelrc` by running the following command in the terminal.
touch .babelrc
- Add the following code to .babelrc
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
-Run the code to install sass.
npm install sass
- Simply change the file extensions of all CSS files