Enable this module inside themodulessection of yournuxt.config.js. You don't need to write a specific Tailwind Extractor sincenuxt-purgecssdoes this bydefault. PurgeCSS will only run onnuxt generate,nuxt buildornuxt start. { modules:[
Next, start up a terminal for your project and run the following commands: npm install -D tailwindcss The above command will install the Tailwind CSS framework as a dependency. Next, generate your tailwind.config.js file by running the command below: npx tailwindcss init The tailwind.config....
npm run dev # OR yarn dev Your app should now be running on http://localhost:5173 by default and look like this: Next, install Tailwind CSS and its peer dependencies with the command below: npm install -D tailwindcss postcss autoprefixer To proceed, we must also run the following command...
How I set up my workflow to trim the Tailwind CSS using PurgeCSS and a simple PostCSS setup (no webpack involved)
npx tailwindcss --minify -i ./src/front/styles/app.css -o ./src/front/wwwroot/css/app.css --watch --config ./src/front/tailwind.config.ts However, this will require developers on your team to remember to run this, and from experience this is not always the best. So what we're go...
It uses standalone tailwind executable https://tailwindcss.com/blog/standalone-cli which comes bundled with first party plugins. So any plugin in @tailswindcss/* should work out of the box. To use any other tailwind plugins you must run a full node.js version of tailwind. The Rails 7 ...
From the terminal run the command 1./node_modules/.bin/tailwind init This command will create a tailwind.js file who contains all the CSS of your project. Here I don't go in details about Tailwind you should read about it here Step 3 - Setup Webpack etc... Now we need to setup we...
Here's the process we devised for incrementally upgrading from an outdated Tailwind version to the latest version while avoiding breaking changes.
Before you can run a design thinking workshop, there are some things that need to be in place first, they include: Workshop objectives: This is a clear definition of the goals that the workshop should achieve. Is it to generate new ideas or to improve on an existing design product? Thi...
You will achieve this by setting important in the tailwind config to your parent class or id. See docs. // tailwind.config.js module.exports = { important: '.tailwind', } Run code snippet Expand snippet Unfortunately, this seems to only be affecting the components and utilities styles... ...