Tailwind
Tailwind Tips
You can start designing with https://tailwindcss.com/ with livereload just like on their landing page.
Create sample app
Simples is to use gem tailwindcss-rails and its generator https://tailwindcss.com/docs/guides/ruby-on-rails
bundle add tailwindcss-rails
rails tailwindcss:install
Or you you want to use yarn
and do it manually:
rails new
command can accept -j
and --css
options.
For js bundler we can choose esbuild, rollup or webpack
https://github.com/rails/jsbundling-rails
For css we can choose tailwind, bootstrap, bulma, postcss, sass
https://github.com/rails/cssbundling-rails
rails new tailwind_livereload -j esbuild --css tailwind
cd tailwind_livereload
Than add build scripts to package.json
# package.json
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
},
Than create sample page
rails g controller pages index --no-helper --no-test
# config/routes.rb
root 'pages#index'
Install livereload
# Gemfile
group :development do
gem "hotwire-livereload"
end
# this will enable some options
rails livereload:install
# config/environments/development.rb
config.hotwire_livereload.listen_paths << Rails.root.join("app/assets/builds")
You do not need any extension or add-on for firefox chrome safari.
Autosorting classes in vim using prettier is performed using Coc https://github.com/iamcco/coc-tailwindcss
:CocInstall coc-tailwindcss
Run the app using
bin/dev
For the error
The asset "application.css" is not present in the asset pipeline.
it is probably that you run the app using rails s
command
You can also run with
docker-compose up
docker-compose down
Core concepts
https://tailwindcss.com/docs/responsive-design/ Responsive design uses 5 breakpoints
@media (min-width: 640px)
smallsm
@media (min-width: 768px)
mediummd
@media (min-width: 1024px)
largelg
@media (min-width: 1280px)
extra largexl
@media (min-width: 1536px)
extra large2xl
Use prefix like md:
to apply on that screensize and bigger.
Default is mobile size so do not use prefix sm:
.
Use arbitraty values https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
<div class="top-[117px] lg:top-[344px]">
Use prefix to apply only in that state https://tailwindcss.com/docs/hover-focus-and-other-states
<button class="bg-sky-600 hover:bg-sky-700 ...">
<li class="flex py-4 first:pt-0 last:pb-0">
<tr class="odd:bg-white even:bg-slate-100">
also form elements based on required
, invalid
and disabled
and also based on parent state using group-
, for example cards
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
<div class='max-w-lg p-6 bg-white group ring hover:bg-sky-500'>
<h3 class='text-sm font-semibold text-slate-900 group-hover:text-white'>+ New project</h3>
</div>
Dark mode https://tailwindcss.com/docs/dark-mode is enabled using dark
class
on parent element
# tailwind.config.js
darkMode: 'class'
or using system settings.
Add custom style TODO https://tailwindcss.com/docs/adding-custom-styles
Whats new in v3.0
https://www.youtube.com/watch?v=mSC6GwizOag
TODO rebuild ios https://www.youtube.com/watch?v=eSzNNYk7nVU
Todo
Add holder for resizing iframe, like on https://tailwindcss.com/docs/responsive-design
Components
Use free component library https://daisyui.com