A framework agnostic TailwindCSS playground for rapid local UI development. Intended to expedite front end development locally.
npm i;
This command installs the dependencies in the local node_modules folder.
npm run build;
This command builds the assets for production in the dist folder using the Webpack bundler.
npm run start;
This command builds the assets and serves them to the Webpack dev server for local development, testing, and protyping.
npm run lint;
This command lints all css and javascript files.
npm run lint:fix;
This command lints and fixes all css and javascript files.
npm run lint:js;
This command lints only the javascript files.
npm run lint:js:fix;
This command lints and fixes only the javascript files.
npm run lint:css;
This command lints only the css files.
npm run lint:css:fix;
This command lints and fixes only the css files.
Entry point for any html templates, components, partials, etc.
Entry point to the javascript related assets.
Entry point for sass/scss styles, however Tailwind CSS should cover about 99.9% (just saying).
Using the Wepback Dev Server Plugin, the development server that provides live reloading. Reloads on entry and view changes.
Babel Loader babel-loader
This package allows transpiling JavaScript files using Babel and webpack.
SASS Loader sass-loader
Loads a Sass/SCSS file and compiles it to CSS.
PostCSS Loader postcss-loader
Loader to process CSS with PostCSS. PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
PostCSS Plugins
- PostCSS Imports: Transform @import rules by inlining content. This plugin can consume local files, node modules or web_modules.
- Autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
- CSS Nano: Takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment.
CSS Loader css-loader
The css-loader interprets @import and url() like import/require() and will resolve them.
MiniCssExtractPlugin MiniCssExtractPlugin.loader
This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
HTML Webpack Plugin html-webpack-plugin
This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.
Mini CSS Extract Plugin mini-css-extract-plugin
This allows your app to use css modules that will be moved into a separate CSS file instead of inside one of your module entries!
Terser Webpack Plugin terser-webpack-plugin
A JavaScript parser and mangler/compressor toolkit for ES6+. This minifies your app in order to load faster and run less javascript.
Airbnb Base airbnb-base
This package provides Airbnb's base JS .eslintrc (without React plugins) as an extensible shared config.
ESLint eslint:recommended
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
Prettier plugin:prettier/recommended
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Stylelint SASS Guidelines stylelint-config-sass-guidelines
A stylelint config inspired by sass-guidelin.es. This linter has been designed / tested with SCSS syntax based on the SCSS guidelines documented in https://sass-guidelin.es/. It is intended for use with SCSS syntax, not Sass (tab style) syntax.
If you're interested in contributing to Tailwind CSS Playground, feel free to submit an issue or pull request.
Feel free to buy me a beer.